参考：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. 【BZOJ 5222】[Lydsy2017省队十连测]怪题

    题目大意: 传送门 给一个长度为$n(n<=200)$的数列$h$,再给$m$个可以无限使用的操作,第$i$个操作为给长度为花费$c_i$的价值给长度为$l_i$的数列子序列+1或-1,求将数列 ...

  2. 【BZOJ 3561】 DZY Loves Math VI

    题目: 给定正整数n,m.求   题解: 水题有益身心健康.(博客园的辣鸡数学公式) 其实到这我想强上伯努利数,然后发现$n^2$的伯努利数,emmmmmm 发现这个式子可以算时间复杂度,emmmmm ...

  3. 【双连通分量】Bzoj2730 HNOI2012 矿场搭建

    Description 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处.于是矿主决定在某些挖煤点设立救援出口,使得无论哪一 ...

  4. ajax封装函数和表单序列化

    //表单序列化function iSerialize(form){ var parts={}; for(var i=0;i<form.elements.length;i++){ var file ...

  5. python+appium 查找某个元素find_element()并click()点击，正向判断与反判断的方法封装

    使用场景: 在自动化测试过程中,难免会用到反判断,包括异常情况的处理,比如:find_element_by_name('测试') 判断"测试"是否存在,存在则点击,不存在则执行其他 ...

  6. zookeeper配置管理+集群管理实战

    引言 之前就了解过kafka,看的似懂非懂,最近项目组中引入了kafka,刚好接着这个机会再次学习下. Kafka在很多公司被用作分布式高性能消息队列,kafka之前我只用过redis的list来做简 ...

  7. Django基础四<二>(OneToMany和 ManyToMany,ModelForm)

    上一篇博文是关于setting.py文件数据库的配置以及model与数据库表关系,实现了通过操作BlogUser,把BlogUser的信息存入后台数据库中.实际开发中有许多东西是相互联系的,除了数据的 ...

  8. Mybatis学习笔记之一（环境搭建和入门案例介绍）

    一.Mybatis概述 1.1 Mybatis介绍 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了go ...

  9. 大白话5分钟带你走进人工智能-第三节最大似然推导mse损失函数（深度解析最小二乘来源）（1）

                                                    第三节最大似然推导mse损失函数(深度解析最小二乘来源)        在第二节中,我们介绍了高斯分布的 ...

  10. Android缓存机制——LruCache

    概述 LruCache的核心原理就是对LinkedHashMap的有效利用,它的内部存在一个LinkedHashMap成员变量,值得注意的4个方法:构造方法.get.put.trimToSize LR ...