本系列文章主要索引详情 点击查看
现在我们已经很棒了，但是在美学方面却差很多。你可能听说过质感设计（material design），这是Google的扁平化设计。
我们将使用Materialize（http://materializecss.com）,这是一个非常漂亮的CSS和JavaScript库，和Bootstrap类似。
工具
IntelliJ IDEA 16
JDK 1.8
Maven 3.5
Tomcat 1.8
开始使用
1、首先我们需要添加依赖，打开我们的 pom.xml 文件，编辑如下
<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的话，就可以看到一个非常漂亮的表单了。
