springboot+thymeleaf+bootstrap，前端模板引擎使⽤⼀、thymeleaf引⼊bootstrap
1）l⾥添加bootstrap等依赖
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.3.1</version>
</dependency>
还要添加⼀个定位依赖：
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.36</version>
</dependency>
此依赖是为了到bootstrap等⽂件路径
2）在html中引⽤css、js⽂件
<head>
<meta charset="UTF-8">
<title>home</title>
<link href="/webjars/bootstrap/css/bootstrap.min.css"
th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<script src="/webjars/jquery/jquery.min.js"
th:src="@{/webjars/jquery/jquery.min.js}"></script>
</head>
3）在html正⽂中添加bootstrap的样式类名即可使⽤
⼆、thymeleaf中使⽤layout
1）在resource⽬录下创建如下⽂件
其中，home,html是将要展⽰的页⾯，layouts/layout.html是框架模板，fragments/header和fragments/footer是模板⽚段。
2）
header.html⾥jquery框架定义
<div class="navbar navbar-inverse navbar-fixed-top" th:fragment="header">
<div>fragment header</div>
</div>
footer.html⾥
<div th:fragment="footer">
<div>fragment footer</div>
</div>
（PS：header、footer等⽂件都和静态html结构⼀样有<head><html>等标签和js、css引⽤，这⾥只截取关键部分）layout.html⾥
<!DOCTYPE html>
<html lang="en" xmlns:th=""
xmlns:layout="/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:replace="fragments/header :: header">
<div>layout header</div>
</div>
<div class="container">
<div layout:fragment="content">
<p>Content </p>
</div>
<footer>
<div th:replace="fragments/footer :: footer">layout footer</div>
</footer>
</div>
</body>
</html>
home.html⾥
<!DOCTYPE html>
<html lang="en" xmlns:th=""
xmlns:layout="/thymeleaf/layout"
layout:decorate="~{layouts/layout}">
<head>
<meta charset="UTF-8">
<title>CIM-Dataware 主页</title>
<link href="/webjars/bootstrap/css/bootstrap.min.css"
th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<script src="/webjars/jquery/jquery.min.js"
th:src="@{/webjars/jquery/jquery.min.js}"></script>
</head>
<body>
<div>
<div>static header</div>
</div>
<th:block layout:fragment="content">
<div class="hero-unit">
<h1>Test</h1>
<p>
Welcome to the Spring Boot Thymeleaf Application! The time is: <strong th:text="${#temporals.format(now, 'dd/MMM/yyyy HH:mm')}">31/12/2015 15:00</        </p>
<p>
<a href="#" th:href="@{properties}" class="btn btn-large btn-success">System Properties</a>
</p>
</div>
</th:block>
</body>
</html>
其中
<div th:replace="fragments/header :: header">这个div会被替换为header.html⾥的<div th:fragment="header">，footer同理
<div layout:fragment="content">这个div会展⽰home.html⾥的<th:block layout:fragment="content">这部分内容
3）效果：
4）注意要添加依赖thymeleaf-layout-dialect
<dependency>
<groupId>nz.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.3.0</version>
</dependency>
如果layout模板没有实现，可能是没添加依赖
未完待续

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。