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

最新推荐文章于 2023-11-13 09:18:31 发布

空山新雨君

最新推荐文章于 2023-11-13 09:18:31 发布

阅读量4.3k

点赞数 1

分类专栏：前端 thymeleaf 文章标签：前端 thymeleaf

本文链接：https://blog.csdn.net/xxtz0522/article/details/88399590

版权

前端同时被 2 个专栏收录

51 篇文章 2 订阅

订阅专栏

thymeleaf

2 篇文章 1 订阅

订阅专栏

一、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

未完待续

空山新雨君

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
spring boot+thymeleaf+bootstrap，前端模板引擎使用

一、thymeleaf引入bootstrap1）pom.xml里添加bootstrap等依赖&lt;dependency&gt; &lt;groupId&gt;org.webjars&lt;/groupId&gt; &lt;artifactId&gt;bootstrap&lt;/artifactId&gt; &lt;version&gt;4.3.1&lt;/ver...
复制链接

扫一扫