如何将 Bootstrap CSS 和 JS 添加到 Thymeleaf

最新推荐文章于 2024-05-16 17:28:54 发布

allway2

最新推荐文章于 2024-05-16 17:28:54 发布

阅读量1k

点赞数 1

文章标签： css javascript bootstrap

本文链接：https://blog.csdn.net/allway2/article/details/128031056

版权

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，请查看以下链接：

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。

allway2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何将 Bootstrap CSS 和 JS 添加到 Thymeleaf

在本文中，我们介绍了几种在 Thymeleaf 模板中包含 Bootstrap 库的方法。对于那些不喜欢页面上的外部链接的人，我们建议使用WebJars甚至项目结构中包含的静态文件。库，幸运的是我们不必单独添加这些框架，因为Bootstrap webjar将这些项目作为依赖项包含在内。内容交付网络是一个分布式系统，其主要任务是在尽可能短的时间内提供来自不同地方的许多用户可以访问的内容。Bootstrap，jQuery和许多其他流行的库可以使用CDN链接包含在网站中。在本文中，我们将介绍几种将。
复制链接

扫一扫