       <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>materializecss</artifactId>
            <version>0.96.0</version>
        </dependency>

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>2.1.4</version>
        </dependency>

2、页面中引入CSS和JS
每个WebJar的结构都是标准的，JS和CSS文件都会放在 /webjars/{lib}/{version}/*.js中。
例如，如果要添加JQuery到我们的页面中，那么Web页面只需要添加如下代码：

    <script src="/webjars/jquery/2.1.4/jquery.js"></script>
    <script src="webjars/materializecss/0.96.0/js/materialize.js"></script>

在视图中，将Materialize CSS包含进来

 <link href="/webjars/materializecss/0.96.0/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projetion"/>

使用布局

我们可以将UI中可以重用的代码块放在一个模块中，想要实现这个功能，我们需要使用thymeleaf-layout-dialect依赖，它已经包含在项目的spring-boot-starter-thymeleaf依赖里面。

在src/main/resources/templates/layout之中创建一个新的文件，命名为default.html，它包含每个页面都重复出现的代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta  http-equiv="content-type" content="text/html" charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>

    <title>Default Title</title>
    <link href="/webjars/materializecss/0.96.0/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projetion"/>

</head>X
<body>
    <section layout:fragment="content">
        <p>Page content goes here</p>
    </section>

    <script src="/webjars/jquery/2.1.4/jquery.js"></script>
    <script src="/webjars/materializecss/0.96.0/js/materialize.js"></script>
</body>
</html>

现在我们再新建一个页面src/main/resources/templates/profile/下新建一个ProfilePage.html页面，让它使用布局，内容如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http:www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default">
<head>
    <meta charset="UTF-8"/>
    <title>Your profile</title>
</head>
<body>
    <div class="row" layout:fragment="content">

        <h2 class="indigo-text center">Prosonal info</h2>

        <form th:action="@{/profile}" method="post" class="col m8 s11 offset-m2">
            <div class="row">
                <div class="input-field col s6">
                    <input id="twitterHandle" type="text"/>
                    <label for="twitterHandle">Last name</label>
                </div>
                <div class="input-field col s6">
                    <input id="email" type="text"/>
                    <label for="email">Email</label>
                </div>
            </div>

            <div class="row">
                <div class="input-field col s6">
                    <input id="birthDate" type="text"/>
                    <label for="birthDate">Birth Date</label>
                </div>
            </div>
            <div class="row s12">
                <button class="btn waves-effect waves-light" type="submit" name="save">Submit<i class="mdi-content-snd right"></i> </button>
            </div>
        </form>

    </div>
</body>
</html>

其中 layout:decorator="layout/default"表明当前页面去哪里查找布局，“@{}”语法将会为资源构建完整路径，它会将服务器上下文路径（如：localhost:808）添加到他的参数上。
最后我们还需要创建一个相关的控制器ProfileController

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ProfileController {

    @RequestMapping("/profile")
    public String displayProfile(){
        return "profile/profilePage";
    }
}

现在，我们访问http://127.0.0.1:8080/profile的话，就可以看到一个非常漂亮的表单了。