参考：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. 电脑不识别U盘

    最近遇到这样一个问题,现把具体问题和解决方案给大家分享一下: 系统:win10 症状:插入U盘,系统提示插入U盘的声音提示,磁盘不显示,360 无图标 原因:USB驱动出现问题 对症下药: 插入U盘右 ...

  2. [译文]Domain Driven Design Reference（四）—— 柔性设计

    本书是Eric Evans对他自己写的<领域驱动设计-软件核心复杂性应对之道>的一本字典式的参考书,可用于快速查找<领域驱动设计>中的诸多概念及其简明解释. 其它本系列其它文章 ...

  3. Uiautomator分类

    分类中主要使用的类介绍!

  4. 微服务架构 - 巧妙获取被墙的Docker镜像

    在国内由于种种原因,有些Docker镜像直接是获取不到的,特别是k8s中的一些镜像.本人在部署k8s中的helm组件时需要获取tiller镜像,如果直接用如下命令: docker pull gcr.i ...

  5. 【RecyclerView优化】

    1.局部刷新 (1)避免整个列表的数据更新,只更新受影响的布局.例如,加载更多时,不使用notifyDataSetChanged(),而是使用notifyItemRangeInserted(range ...

  6. 马蜂窝搜索基于 Golang 并发代理的一次架构升级

    搜索业务是马蜂窝流量分发的重要入口.很多用户在使用马蜂窝时,都会有目的性地主动搜索与自己旅行需求相关的各种信息,衣食住行,事无巨细,从而做出最符合需求的旅行决策. 因此在马蜂窝,搜索业务交互的下游模块 ...

  7. 设计模式-发布订阅模式(javaScript)

    1. 前言 2. 什么是发布订阅模式 3. 发布订阅优缺点 4. 举例 4. 总结 1. 前言 发布订阅者模式是为了发布者和订阅者之间避免产生依赖关系,发布订阅者之间的订阅关系由一个中介列表来维护.发 ...

  8. kubernetes实践之一：kubernetes二进制包安装

    kubernetes二进制部署 1.环境规划 软件 版本 Linux操作系统 CentOS Linux release 7.6.1810 (Core) Kubernetes 1.9 Docker 18 ...

  9. synchronized关键字简介 多线程中篇（十一）

    前面说过,Java对象都有与之关联的一个内部锁和监视器 内部锁是一种排它锁,能够保障原子性.可见性.有序性 从Java语言层面上说,内部锁使用synchronized关键字实现 synchronize ...

  10. 设计模式之组合模式——Java语言描述

    组合模式又叫做部分整体模式,适用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次 介绍 意图 将对象组合成树形结构以表示"部分-整体" ...