参考：https://ultraq.github.io/thymeleaf-layout-dialect/Installation.html

依赖包

注意里面的thymeleaf-layout-dialec就是模板包，必须要安装的，我之前就坑在这里了

 'org.springframework.boot:spring-boot-starter-thymeleaf',

 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.3.0'

default.html模板页

注意在layout模板里不能再使用其它模板片断了

<!DOCTYPE HTML>

<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.w3.org/1999/xhtml">

    <head lang="en" th:fragment="head">

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <link href="../../static/css/bootstrap.min.css"

              th:href="@{/css/bootstrap.min.css}"

              rel="stylesheet" media="screen"/>

        <link href="../../static/css/jquery.dataTables.min.css"

              th:href="@{/css/jquery.dataTables.min.css}"

              rel="stylesheet" media="screen"/>

        <link href="../../static/css/mini_springboot.css"

              th:href="@{/css/mini_springboot.css}"

              rel="stylesheet" media="screen"/>

        <title>SpringBoot</title>

    </head>

    <body>

        <div class="container">

            <div th:fragment="header">

                <nav class="navbar navbar-default">

                    <div class="container-fluid">

                        <div class="navbar-header">

                            <a class="navbar-brand" href="#" th:href="@{/}">Home</a>

                            <ul class="nav navbar-nav">

                                <li>

                                    <a href="#" th:href="@{/init}">初始化</a>

                                </li>

                                <li>

                                    <a href="#" th:href="@{/customers}">客户列表</a>

                                </li>

                                <li>

                                    <a href="#" th:href="@{/customerform}">建立客户</a>

                                </li>

                            </ul>

                        </div>

                    </div>

                </nav>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    <div layout:fragment="content">content</div>

                </div>

            </div>

            <div th:fragment="footer">

                <div class="footer">大叔直通车:www.lindddd.top</div>

                <script src="../../static/js/jquery.min.js"

                        th:src="@{/js/jquery.min.js}"></script>

                <script src="../../static/js/bootstrap.min.js"

                        th:src="@{/js/bootstrap.min.js}"></script>

                <script src="../../static/js/jquery.dataTables.min.js"

                        th:src="@{/js/jquery.dataTables.min.js}"></script>

                <script src="../../static/js/mini_springboot.js"

                        th:src="@{/js/mini_springboot.js}"></script>

            </div>

        </div>

    </body>

</html>

使用它

<!DOCTYPE HTML>

<html xmlns:th="http://www.thymeleaf.org"

      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

      layout:decorator="~{layout/default}">

<head>

    <title>Spring Boot and Thymeleaf - Greeting with Thymeleaf Layout Dialect!</title>

</head>

<body>

<div layout:fragment="content">

    <div th:if="${not #lists.isEmpty(customers)}">

        <table id="customersTable" class="table table-striped">

            <thead>

            <tr>

                <th>Name</th>

                <th>Email</th>

                <th>Age</th>

                <th></th>

            </tr>

            </thead>

            <tbody>

            <tr th:each="customer : ${customers}">

                <td th:text="${customer.id}"></td>

                <td th:text="${customer.name}"></td>

                <td th:text="${customer.email}"></td>

                <td th:text="${customer.age}"></td>

                <td><a th:href="${'/customerdetail/'+customer.id}">查看</a></td>

            </tr>

            </tbody>

        </table>

    </div>

</div>

</body>

</html>

springboot~thymeleaf页面布局的步骤的更多相关文章

  1. Thymeleaf利用layout.html文件生成页面布局框架

    1.layout.html文件 生成布局 <!DOCTYPE html> <html lang="zh-CN" xmlns:th="http://www ...

  2. SpringBoot thymeleaf模板页面没提示，SpringBoot thymeleaf模板插件安装

    SpringBoot thymeleaf模板插件安装 SpringBoot thymeleaf模板Html页面没提示 SpringBoot  thymeleaf模板页面没提示 SpringBoot t ...

  3. Springboot+JdbcTemplate +thymeleaf 页面 做迷你版的bug系统

    https://www.cnblogs.com/qianjinyan/p/10065160.html  在我上一篇随笔中介绍了关于要做的系统的数据结构,连接如上 今天实现连接mssql server, ...

  4. 解决thymeleaf layout布局不生效

    今天使用thymeleaf layout布局时总是不生效,特此把解决问题的步骤和几个关键点记录下来备忘. 一.检查依赖 1.thymeleaf必备maven依赖: <dependency> ...

  5. springboot: thymeleaf 使用详解

    springboot:thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎 ...

  6. springboot thymeleaf【转】【补】

    thymeleaf模板 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 1.引入thymeleaf依赖 <!-- ...

  7. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  9. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

随机推荐

  1. 请注意写代码的习惯与态度(Java)

    注: 以下内容引自http://blog.csdn.net/xtayfjpk/article/details/52136686 请注意写代码的习惯与态度(Java) 原创 2016年08月06日 16 ...

  2. C++中虚拟继承

    多重继承 在多重继承中,基类的构造函数的调用次序即不受派生类构造函数初始化列表中出现的基类构造函数的影响,也不受基类在构造函数初始化列表中的出现次序的影响,它按照基类在类派生列表中的出现次序依次调用相 ...

  3. 【BZOJ 2844】: albus就是要第一个出场

    题目大意: 给一个长度为n的序列,将其子集的异或值排序得到B数组,给定一个数字Q,保证Q在B中出现过,询问Q在B中第一次出现的下标. 题解: 感觉和hdu3949第K小异或值有一像,然而发现要求出现次 ...

  4. CentOS7 docker试水

    CentOS 7.0,无外网直接访问权限,有一台代理服务器. 首先安装docker-ce,参考http://blog.51cto.com/aaronsa/2056882 除非特殊说明,以下操作都用ro ...

  5. Windows上安装配置SSH教程（6）——综合应用：在Windows上实现SSH远程登陆与文件传输

    ----------------- 声明:本教程现已经弃用.由于客户端同时安装Cygwin和OpenSSH for Windows会出现问题(Cygwin的shell下无法使用ssh命令),建议直接在 ...

  6. 使用FileUpload实现Servlet的文件上传

    简介 FileUpload 是 Apache commons下面的一个子项目,用来实现Java环境下的文件上传功能. FileUpload链接 FileUpload 是基于Apache的Commons ...

  7. Python并发编程之初识异步IO框架：asyncio 上篇（九）

    大家好,并发编程 进入第九篇. 通过前两节的铺垫(关于协程的使用),今天我们终于可以来介绍我们整个系列的重点 -- asyncio. asyncio是Python 3.4版本引入的标准库,直接内置了对 ...

  8. 深度学习之卷积神经网络（CNN）

    卷积神经网络(CNN)因为在图像识别任务中大放异彩,而广为人知,近几年卷积神经网络在文本处理中也有了比较好的应用.我用TextCnn来做文本分类的任务,相比TextRnn,训练速度要快非常多,准确性也 ...

  9. maven构建失败。

    maven项目编译报“Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1” 解决方案:setting.x ...

  10. python爬虫踩坑教程

    我们的目标是爬取下面这个个网址上的2010~2018年的数据 http://stockdata.stock.hexun.com/zrbg/Plate.aspx?date=2015-12-31 获取我们 ...