大家好，欢迎来到IT知识分享网。
1. 简介
在本文中，我们将介绍几种将Bootstrap 库添加到Thymeleaf 项目的方法。我们将使用静态资源、内容交付网络和 webjar 库包含 Bootstrap 资产。
2. 使用 添加引导程序WebJars
WebJars是打包到Java存档文件（JAR）中的前端库。它们允许我们使用 Maven 或 Gradle 等项目构建工具来下载客户端依赖项，就像任何其他外部库一样。
在Maven项目中，我们可以简单地在POM.xml文件中添加Boostrap webjar 依赖项，如以下示例所示：
<dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.0.0-2</version> </dependency>对于Gradle项目，我们可以使用以下代码片段：
compile group: 'org.webjars', name: 'bootstrap', version: '4.0.0-2' Bootstrap需要jQuery和popper.js库，幸运的是我们不必单独添加这些框架，因为Bootstrap webjar将这些项目作为依赖项包含在内。
现在我们可以在 Thymeleaf 模板中添加 Bootstrap CSS 和 JS 文件，如以下示例所示：
<!DOCTYPE HTML> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>Spring Boot Thymeleaf - Bootstrap WebJars</title> <link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/> </head> <body> <div class="container"> <div class="row"> <div class="col"> </div> </div> </div> <script th:src="@{/webjars/jquery/3.0.0/jquery.min.js}"></script> <script th:src="@{/webjars/popper.js/1.12.9-1/umd/popper.min.js}"></script> <script th:src="@{/webjars/bootstrap/4.0.0-2/js/bootstrap.min.js}"></script> </body> </html>如果您正在寻找更多 WebJars，请查看以下链接：
- Maven WebJars，
- Maven Bootstrap WebJars，
- Maven jQuery WebJars.
3. 使用 添加引导库static asset files
让我们来看看将 Bootstrap 库添加到 Thymeleaf 模板的另一种方法。
<!DOCTYPE HTML> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>Spring Boot Thymeleaf - Bootstrap Static Files</title> <link th:rel="stylesheet" th:href="@{/assets/bootstrap/css/bootstrap.min.css} "/> </head> <body> <div class="container"> <div class="row"> <div class="col"> </div> </div> </div> <script th:src="@{/assets/jquery/jquery.min.js}"></script> <script th:src="@{/assets/popper.js/popper.min.js}"></script> <script th:src="@{/assets/bootstrap/js/bootstrap.min.js}"></script> </body> </html>在这个例子中，我们使用了 Spring Boot 默认静态资源目录中包含的 Bootstrap CSS 和 JS 文件，以以下结构组织：
/resources/assets/bootstrap/css/bootstrap.min.css /resources/assets/bootstrap/js/bootstrap.min.js /resources/assets/jquery/jquery.min.js /resources/assets/popper.js/popper.min.js 4. 使用 添加引导程序CDN
内容交付网络是一个分布式系统，其主要任务是在尽可能短的时间内提供来自不同地方的许多用户可以访问的内容。
Bootstrap，jQuery和许多其他流行的库可以使用CDN链接包含在网站中。
在下面的示例中，我们介绍了如何使用 CDN 以在 Thymeleaf 模板中包含引导程序：
<!DOCTYPE HTML> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>Spring Boot Thymeleaf - Bootstrap CDN</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col"> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.1/cjs/popper.min.js" integrity="sha256-T3bYsIPyOLpEfeZOX4M7J59ZoDMzuYFUsPiSN3Xcc2M=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>5. 结论
在本文中，我们介绍了几种在 Thymeleaf 模板中包含 Bootstrap 库的方法。哪种方法更适合您的项目取决于许多因素。对于那些不喜欢页面上的外部链接的人，我们建议使用WebJars甚至项目结构中包含的静态文件。对于那些想要加快资源上传时间的人，我们会推荐 CDN。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/158328.html
