标签：Bootstrap Thymeleaf Spring Boot
Thymeleaf 和 Bootstrap 是开发现代 Web 应用程序的强大技术。在本文中，我们将展示将 Thymeleaf 和 Bootstrap 添加到 Spring Boot 应用程序的步骤。
完整的设置也可以直接在 Bootify Builder 中创建。只需使用open project打开一个项目，选择您的首选项并选择Thymeleaf + Bootstrap作为前端堆栈。如果您不选择前端，则可以手动执行以下所有步骤。
将 Themeleaf 添加到我们的应用程序中
Thymeleaf 是 Spring Boot 最常用的模板引擎。由于模板是用有效的 HTML 代码编写的，因此也可以在没有服务器端渲染的情况下打开它们。要设置引擎和所有推荐的实用程序，首先将以下两个依赖项添加到我们的应用程序中。
implementation('org.springframework.boot:spring-boot-starter-thymeleaf')
implementation('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect')
为 Thymeleaf 添加新的依赖项
该模块spring-boot-starter-thymeleaf将自动集成模板引擎 - 在下面的控制器中我们已经可以看到它是如何工作的。建议thymeleaf-layout-dialect大多数生产应用程序使用此布局，以便多个页面可以使用相同的布局。我们不需要在这里提供任何版本，因为它们是 Spring Boot 依赖管理插件的一部分。
@Controller
@RequestMapping("/todo")
public class TodoController {
// ...
@GetMapping
public String list(final Model model) {
model.addAttribute("todos", todoService.findAll());
return "todo/list";
}
}一个简单的 MVC 控制器
我们的简单端点仅显示待办事项列表。为此，所有当前待办事项都会首先从服务加载并添加到模型中。模板"todo/list"已src/main/resources/templates/todo/list.html加载。除非我们进行其他配置，否则该template文件夹是从中选取模板的默认文件夹。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout}">
<head>
<title>[[#{todoList.list.headline}]]</title>
</head>
<body>
<div layout:fragment="content">
<!-- ... -->
<div th:if="${todoLists.empty}">[[#{todoList.list.empty}]]</div>
<div th:if="${!todoLists.empty}" class="table-responsive">
<table class="table table-striped table-hover align-middle">
<thead>
<tr>
<th scope="col">[[#{todoList.name.label}]]</th>
<th><!-- --></th>
</tr>
</thead>
<tbody>
<tr th:each="todo : ${todos}">
<td>[[${todo.name}]]</td>
<td>
<div class="float-end text-nowrap">
<a th:href="@{/todos/edit/{id}(id=${todo.id})}" class="btn btn-sm btn-info">[[#{todo.list.edit}]]</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>一个简单的 Thymeleaf 模板
添加模板后list.html，我们已经成功使用 Thymeleaf 和 Bootstrap 类 - 稍后将显示唯一缺少的布局。为了在开发过程中实现真正的热重载，仅仅关闭模板缓存是不够的。本文介绍如何直接从文件系统读取 HTML 文件。
使用 WebJars 进行引导集成
Bootstrap 是目前最流行的 CSS 框架，可以使用 WebJars 直接集成到我们的 Spring Boot 应用程序中。为此，我们首先需要另一个依赖项。
implementation('org.webjars:bootstrap:5.3.3')现在，我们可以将 Bootstrap 的 JavaScript 和 CSS 文件包含在我们的代码中，layout.html如下所示。如果需要的src/main/resources/static/js话，可以额外提供我们自己的 JS 或 CSS src/main/resources/static/css。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- ... -->
<link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet" />
<link th:href="@{/css/app.css}" rel="stylesheet" />
<script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}" defer></script>
<script th:src="@{/js/app.js}" defer></script>
</head>
<body>
<main class="my-5">
<div class="container">
<!-- ... -->
<div layout:fragment="content" />
</div>
</main>
</body>
</html>将 Bootstrap 文件集成到最小化版本中
使用 Webpack 进行 Bootstrap 集成
或者，还可以使用 Webpack 集成 Bootstrap，以定义如何向前端提供 CSS 和 JS 的更复杂的规则。如果Webpack已经准备好了，只需要一条命令就可以添加Bootstrap。
npm i --save bootstrap @popperjs/core
但是，由于使用 npm 和 DevServer 设置 Webpack 需要大量解释，因此请查看有关使用 Webpack 设置 Spring Boot 的文章。使用 Webpack 提供了许多优势 - 但也带来了更高的集成工作成本。
在 Bootify 的免费计划中，可以直接在浏览器中初始化包括前端堆栈的 Spring Boot 应用程序，无需注册。带有 Bootstrap 的 Thymeleaf 可以直接通过 WebJars 或通过 Webpack 获得。
标签：Bootstrap,Thymeleaf,Spring Boot 来源：
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。