参考：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 Script 读书笔记 (三) 函数

    1. 函数作用域 在函数内部定义的变量,外部无法读取,称为"局部变量"(local variable). 变量v在函数内部定义,所以是一个局部变量,函数之外就无法读取. 函数内部定 ...

  2. config.go 源码阅读

    package main import (     "io/ioutil"     "launchpad.net/goyaml" ) // ProxyConfi ...

  3. rename_windows.go

    {         if err != nil {             return err         }         return syscall.EINVAL     }     r ...

  4. OpenGL执行渲染图片的主要操作步骤

    一个用来执行图形渲染的OpenGL程序的主要步骤包括: 1.从OpenGL的几何图元中设置数据,用于构建形状: 2.使用不用的着色器(shader)对输入的图元数据进行进行计算,判断它们的位置.颜色以 ...

  5. 【爆料】-《澳大利亚联邦大学毕业证书》FedUni一模一样原件

    ☞澳大利亚联邦大学毕业证书[微/Q:2544033233◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士& ...

  6. 如何在ST官网下载STM32固件库

    1.首先要注册一个ST账号,下载的时候需要. 2.找到工具与软件 3.进去之后选"产品列表" 4.在产品列表里选STM32微控制器软件,直接点下图标号2,不要点左边的加号 5.进去 ...

  7. 在后台主机中托管SignalR服务并广播心跳包

    什么是后台主机 在之前的 Asp.NETCore 轻松学系列中,曾经介绍过一个轻量级服务主机 IHostedService ,利用 IHostedService 可以轻松的实现一个系统级别的后台服务, ...

  8. Android6.0 源码修改之 Contacts应用

    一.Contacts应用的主界面和联系人详情界面增加顶部菜单添加退出按钮 通过Hierarchy View 工具可以发现 主界面对应的类为 PeopleActivity 联系人详情界面对应的类为 Qu ...

  9. Geoserver+Openlayers拉框查询

    1.代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  10. 操作系统：diskpart常用指令（使用diskpart实现分区管理）

    配合磁盘管理一起食用,效果最佳.(我的电脑右键 -> 管理 -> 磁盘管理) status:列出主要命令 list:列出list下的命令 select disk 0:选择第一块磁盘 lis ...