• 如何将 Bootstrap CSS 和 JS 添加到 Thymeleaf

    1. 简介

    在本文中，我们将介绍几种将Bootstrap 库添加到Thymeleaf 项目的方法。我们将使用静态资源、内容交付网络和 webjar 库包含 Bootstrap 资产。

    2. 使用 添加引导程序WebJars

    WebJars是打包到Java存档文件（JAR）中的前端库。它们允许我们使用 Maven 或 Gradle 等项目构建工具来下载客户端依赖项，就像任何其他外部库一样。

    在Maven项目中，我们可以简单地在POM.xml文件中添加Boostrap webjar 依赖项，如以下示例所示：

    复制 
    1. <dependency>
    2.     <groupId>org.webjars</groupId>
    3.     <artifactId>bootstrap</artifactId>
    4.     <version>4.0.0-2</version>
    5. </dependency>

    对于Gradle项目，我们可以使用以下代码片段：

    复制 
    compile group: 'org.webjars', name: 'bootstrap', version: '4.0.0-2'

    Bootstrap需要jQuery和popper.js库，幸运的是我们不必单独添加这些框架，因为Bootstrap webjar将这些项目作为依赖项包含在内。

    现在我们可以在 Thymeleaf 模板中添加 Bootstrap CSS 和 JS 文件，如以下示例所示：

    复制 
    1. <!DOCTYPE HTML>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8"/>
    5.     <title>Spring Boot Thymeleaf - Bootstrap WebJars</title>
    6.  
    7.     <link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
    8. </head>
    9. <body>
    10.  
    11. <div class="container">
    12.     <div class="row">
    13.         <div class="col">
    14.  
    15.         </div>
    16.     </div>
    17. </div>
    18.  
    19. <script th:src="@{/webjars/jquery/3.0.0/jquery.min.js}"></script>
    20. <script th:src="@{/webjars/popper.js/1.12.9-1/umd/popper.min.js}"></script>
    21. <script th:src="@{/webjars/bootstrap/4.0.0-2/js/bootstrap.min.js}"></script>
    22.  
    23. </body>
    24. </html>

    如果您正在寻找更多 WebJars，请查看以下链接：

    3. 使用 添加引导库static asset files

    让我们来看看将 Bootstrap 库添加到 Thymeleaf 模板的另一种方法。

    复制 
    1. <!DOCTYPE HTML>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8"/>
    5.     <title>Spring Boot Thymeleaf - Bootstrap Static Files</title>
    6.  
    7.     <link th:rel="stylesheet" th:href="@{/assets/bootstrap/css/bootstrap.min.css} "/>
    8. </head>
    9. <body>
    10.  
    11. <div class="container">
    12.     <div class="row">
    13.         <div class="col">
    14.  
    15.         </div>
    16.     </div>
    17. </div>
    18.  
    19. <script th:src="@{/assets/jquery/jquery.min.js}"></script>
    20. <script th:src="@{/assets/popper.js/popper.min.js}"></script>
    21. <script th:src="@{/assets/bootstrap/js/bootstrap.min.js}"></script>
    22.  
    23. </body>
    24. </html>

    在这个例子中，我们使用了 Spring Boot 默认静态资源目录中包含的 Bootstrap CSS 和 JS 文件，以以下结构组织：

    复制 
    1. /resources/assets/bootstrap/css/bootstrap.min.css
    2. /resources/assets/bootstrap/js/bootstrap.min.js
    3. /resources/assets/jquery/jquery.min.js
    4. /resources/assets/popper.js/popper.min.js

    4. 使用 添加引导程序CDN

    内容交付网络是一个分布式系统，其主要任务是在尽可能短的时间内提供来自不同地方的许多用户可以访问的内容。

    Bootstrap，jQuery和许多其他流行的库可以使用CDN链接包含在网站中。

    在下面的示例中，我们介绍了如何使用 CDN 以在 Thymeleaf 模板中包含引导程序：

    复制 
    1. <!DOCTYPE HTML>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8"/>
    5.     <title>Spring Boot Thymeleaf - Bootstrap CDN</title>
    6.  
    7.     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
    8.           integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    9. </head>
    10. <body>
    11.  
    12. <div class="container">
    13.     <div class="row">
    14.         <div class="col">
    15.  
    16.         </div>
    17.     </div>
    18. </div>
    19.  
    20. <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    21.         integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    22.         crossorigin="anonymous"></script>
    23.  
    24. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.1/cjs/popper.min.js"
    25.         integrity="sha256-T3bYsIPyOLpEfeZOX4M7J59ZoDMzuYFUsPiSN3Xcc2M=" crossorigin="anonymous"></script>
    26.  
    27. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    28.         integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    29.         crossorigin="anonymous"></script>
    30.  
    31. </body>
    32. </html>

    5. 结论

    在本文中，我们介绍了几种在 Thymeleaf 模板中包含 Bootstrap 库的方法。哪种方法更适合您的项目取决于许多因素。对于那些不喜欢页面上的外部链接的人，我们建议使用WebJars甚至项目结构中包含的静态文件。对于那些想要加快资源上传时间的人，我们会推荐 CDN。

  • 相关阅读:
    递归 - java实现
    1006 换个格式输出整数【PAT (Basic Level) Practice （中文）】
    具有CT造影功能的硫化铋纳米棒|硫化铋-锌原卟啉复合材料（PAMAM/Bi2S3复合纳米粒子）
    HC32_HC32F072FAUA_FLASH使用
    Kamiya丨Kamiya艾美捷小鼠血清淀粉样蛋白A ELISA说明书
    systemd-journald日志管理服务详解
    计算机网络层（2）
    Redis 非关系型数据库 配置与优化
    C++知识点大全（第二版）
    多进程操作数据库异常问题
  • 原文地址：https://blog.csdn.net/allway2/article/details/128031056