spring boot+thymeleaf+bootstrap，前端模板引擎使用

最新推荐文章于 2023-08-11 19:56:13 发布

原创最新推荐文章于 2023-08-11 19:56:13 发布 · 4.6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #thymeleaf

前端同时被 2 个专栏收录

51 篇文章

订阅专栏

thymeleaf

2 篇文章

订阅专栏

本文介绍如何在Thymeleaf中引入Bootstrap，并利用thymeleaf-layout-dialect进行页面布局，包括添加依赖、引用css/js文件及使用布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、thymeleaf引入bootstrap

1）pom.xml里添加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里

<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="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/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 goes here...</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="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/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</strong>
        </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.net.ultraq.thymeleaf</groupId>
           <artifactId>thymeleaf-layout-dialect</artifactId>
           <version>2.3.0</version>
       </dependency>

如果layout模板没有实现，可能是没添加依赖

参考:https://www.jianshu.com/p/3b5ebc545a99

https://blog.csdn.net/dingse/article/details/80509208

未完待续