Bootstrap 4 样式未使用带有 thymeleaf 的 spring boot 加载答案

【问题标题】：Bootstrap 4 styles not loaded using spring boot with thymeleafBootstrap 4 样式未使用带有 thymeleaf 的 spring boot 加载
【发布时间】：2020-01-31 20:40:12
【问题描述】：

我在使用 Bootstrap 4 时遇到问题：样式未加载到页面中。我正在使用 Spring Boot、Maven 和 THymeleaf。

在我的 HTML 文件中

<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/4.0.0-beta.2/css/bootstrap.min.css}" />

我的 Maven 依赖项中也有

<dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>4.3.1</version>
</dependency>

例如，当我尝试添加引导卡或按钮时，我会以基本的 html 样式看到它们。那么，我的问题是什么？感谢帮助

【问题讨论】：

您是否在<head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"></head> 标签上添加了引导CDN 链接？如果这个工作正常，那么确保你的 maven 依赖相对路径是正确的？
是的，路径很好，链接在head标签中，但还是坏了
你是否在配置类中配置了 web-jars？

标签： spring maven spring-boot bootstrap-4 thymeleaf

【解决方案1】：

这是您可以在 pom.xml 文件中添加这些依赖项的方法

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.0.0-2</version>
</dependency>

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.30</version>
</dependency>

当使用Spring Framework version 4.2 or higher 时，它会自动检测类路径上的webjars-locator 库，并使用它来自动解析任何WebJars 资产的版本。并简单地添加到您的视图页面标签

<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">

并在您的<body></body> 标签的底部添加这些

<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>

我希望你现在处于引导状态。编码愉快。

为了更好地理解我所说的参考这个-https://www.baeldung.com/maven-webjars

【讨论】：

我不知道为什么，但现在可以正常使用您发布的脚本标签，但在标签中。谢谢

【解决方案2】：

试试（类似于）这个：

<link rel="stylesheet"
        th:href="@{webjars/bootstrap/4.3.1/css/bootstrap.min.css}" />

注意事项：

引导程序的版本。您的 html 版本与您的 pom 版本不同。
您必须在花括号内使用“webjars/...”，而不是“/webjars/...”。删除前导斜杠 (/)。

看看示例here。

【讨论】：