引入Thymeleaf：
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <link th:href="@{bootstrap/css/bootstrap.css}" rel="stylesheet"/> <link th:href="@{bootstrap/css/bootstrap-theme.css}" rel="stylesheet"/> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <title>Index</title> </head> <body> Welcome! </body> </html>
引用Web静态资源：
<link th:href="@{bootstrap/css/bootstrap.css}" rel="stylesheet"/> <link th:href="@{bootstrap/css/bootstrap-theme.css}" rel="stylesheet"/>
访问model（${}）：
<div class="panel-body"> <span th:text="${person.name}"></span> <span th:text="${person.age}"></span> </div>
model迭代访问（th:each指令进行迭代，person为迭代元素，${people}访问people这个model）：
<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">访问model列表</h3> </div> <div class="panel-body"> <ul class="panel-group"> <li class="list-group-item" th:each="person:${people}"> <span th:text="${person.name}"></span> <span th:text="${person.age}"></span> </li> </ul> </div> </div>
数据判断（th:if指令进行判断，支持如 >、< 等类型的比较条件，同时支持SpringEL）：
<div th:if="${not #lists.isEmpty(people)}">内容</div>
在JavaScript中访问model有些不同，形如 [[${}]]。通过th:inline，才可以访问model）：
<script th:inline="javascript"> $(function () { var person = [[${person}]]; console.log(person.name + "/" + person.age); }); </script>