1、约束
<html lang="en" xmlns:th="http://www.thymeleaf.org">
2、link链接
<link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
3、form链接
<form class="form-signin" method="post" th:action="@{/user/login}">
4、img链接
<img class="mb-4" th:src="@{/asserts/img/bootstrap-solid.svg}" alt="" width="72" height="72">
5、从Properties中读数据
<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}"></h1>
6、IF语句
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
7、抽取模块
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <!--共同模块抽取--> <!-- 定义th:fragment="topbar" --> <nav th:fragment="topbar" class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0"> <!--[[${session.loginUser}]]一般都用他来取session--> <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a> <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> <ul class="navbar-nav px-3"> <li class="nav-item text-nowrap"> <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a> </li> </ul> </nav> <!-- 定义th:fragment="sitebar" --> <nav th:fragment="sitebar" class="col-md-2 d-none d-md-block bg-light sidebar"> <div class="sidebar-sticky"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" th:href="@{/main.html}"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> Dashboard <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" th:href="@{/emps}"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> </svg> 员工管理 </a> </li> </ul> </div> </nav> </html>
8、导入模块 都行
<div th:insert="~{commons/bar::topbar}"></div>
<div th:replace="~{commons/bar::sitebar}"></div>
9、走后端url映射
<a class="nav-link" th:href="@{/emps}">
10、遍历数组 + 时间格式转化
<tr th:each="emp:${emps}"> <td th:text="${emp.id}"></td> <td th:text="${emp.lastName}"></td> <td th:text="${emp.email}"></td> <td th:text="${emp.gender==0?‘女‘:‘男‘}"></td> <td th:text="${emp.EDepartment.departmentName}"></td> <!--使用时间格式化工具 yyyy-MM-dd HH:mm--> <td th:text="${#dates.format(emp.birth,‘yyyy-MM-dd‘)}"></td> <!--操作--> <td> <a class="btn btn-sm btn-primary" th:href="@{‘/emp/‘+${emp.id}}">编辑</a> <a class="btn btn-sm btn-primary" th:href="@{‘/delEmp/‘+${emp.id}}">删除</a> </td> </tr>
11、session的取值
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>
原文：https://www.cnblogs.com/paidaxing300/p/13156521.html