thymeleaf使用_thymeleaf模板引擎和前端框架bootstrap是什么关系-CSDN博客

本文链接：https://blog.csdn.net/shanshan_blog/article/details/65632772

来源http://www.jianshu.com/p/db16d4d8d9c7

第一篇环境搭建好之后，下面接着开始对页面进行布局。通常包含header、footer、menu等等，下面用Thymeleaf来实现，顺便把bootstrap也加进来。另外Thymeleaf版本之间有差异，需要注意。

在templates下新建common文件夹

在common下建一个top_header.html文件

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<header>
<!-- 来自bootstrap例子 -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
  </div>
  <!-- 其他已删 -->
</nav>
</header>
</html>

index.html中引入top_header的内容（这样就可以了）

<body>
  <!-- 这种写法，如果top_header中有多个header tag，则都引入进来 -->
  <header th:replace="common/top_header :: header"></header>
</body>

Thymeleaf有多种方式引入

th:insert 3.0+版本新加的
th:replace 2.0+ 3.0+都可用
th:include 这个在3.0版本已经不建议使用

前两个的区别（直接看例子，来自官方）：

<!-- 有这么一个html段 -->
<footer th:fragment="copy"> 
  © 2011 The Good Thymes Virtual Grocery
</footer>

<!-- 引用html段 -->
<body>
  <div th:insert="footer :: copy"></div>
  <div th:replace="footer :: copy"></div>
  <div th:include="footer :: copy"></div>
</body>

<!-- 最终结果 -->
<body>
  <!-- th:insert，div tag内部插入html段 -->
  <div>
    <footer>
      © 2011 The Good Thymes Virtual Grocery
    </footer>
  </div>
  <!-- th:replace，使用html段直接替换 div tag -->
  <footer>
    © 2011 The Good Thymes Virtual Grocery
  </footer>
  <!-- th:include，div tag内部插入html段（仅保留段子元素的内容） -->
  <!-- 仔细对比 th:insert 与 th:include的结果 -->
  <div>
    © 2011 The Good Thymes Virtual Grocery
  </div>
</body>

Thymeleaf 布局常用写法：

使用th:fragment给html段指定一个名称，然后通过名称引用，最常用

<!-- 1、通过th:fragment指定一个html段 -->
<footer th:fragment="copy"> 
© 2011 The Good Thymes Virtual Grocery
</footer>
<!-- 2、通过th:insert或th:replace引用html段 -->
<!-- :: 前面是html页面的相对路径，不需要写后缀(.html)；后面是段的名称，即th:fragment="copy" 中的copy -->
<div th:insert="footer :: copy"></div>

直接使用html tag引入，不需要写th:fragment（如最开始的例子）

  <!-- 这种写法，如果top_header中有多个header tag，则都引入进来，适用只有一个相同tag的情况 -->
  <header th:replace="common/top_header :: header"></header>

使用html tag的id属性，不需要写th:fragment

<!-- 一个html段，div指定一个id -->
<div id="copy-section">
© 2011 The Good Thymes Virtual Grocery
</div>
<!-- 引用上面的html段 -->
<!-- :: 前面是html名称相对路径，不需要写后缀(.html)；后面是html tag的id，id前需要加 #，这是3.0+的写法 -->
<div th:insert="~{footer :: #copy-section}"></div>
<!-- 2.0+要这么写 -->
<div th:insert="footer :: #copy-section"></div>

开发时还有一种情况，比如html的head部分，很多公用的东西，但有个别不一样的，如title属性，本页面的css、js之类的，在传统jsp开发时，用<jsp:include>标签可直接引入公用部分，而对于thymeleaf的insert和replace都不好用，后来尝试直接引入页面的方法居然可以了：

<head>
  <title>自己页面的名字<title>

  <!-- 引入整个页面的内容，而不是上面提到的方法（只引入指定的段） -->
  <!-- 官方未提到该用法，这个属于偷巧的做法 -->
  <head th:replace="common/head"/>  <!-- 未使用 :: 符号 -->

  <!-- 下面加自己的css、js，如果有 -->
</head>