带有 Thymeleaf 的 Spring Boot 未拾取 Bootstrap答案

【问题标题】：Bootstrap is not picked up by SpringBoot with Thymleafe带有 Thymeleaf 的 Spring Boot 未拾取 Bootstrap
【发布时间】：2018-08-05 00:25:07
【问题描述】：

我正在尝试在SpringBoot 应用程序中使用Thymleafe 和Bootstrap。但是，我不明白为什么 SpringBoot 不接Bootstrap。

当我运行我的项目时，它只显示plain-old HTML，而不是选择Bootstrap。

pom.xml

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.0.0</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.0.0</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1" />
<title>Home</title>

<script type="text/javascript" src="webjars/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
    href="webjars/bootstrap/4.0.0/css/bootstrap.min.css" />
</head>
<body>

    <div class="container">
        <h2>Please Login</h2>
        <form th:action="@{/users/login}" method="POST">
            <div class="form-group">
                <label for="email">Email:</label> <input type="email"
                    class="form-control" id="username" placeholder="Enter email"
                    name="username"></input>
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label> <input type="password"
                    class="form-control" id="password" placeholder="Enter password"
                    name="password"></input>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div> 
</body>
</html>

任何人都可以帮助我缺少什么吗？

【问题讨论】：

标签： java spring twitter-bootstrap spring-boot thymeleaf

【解决方案1】：

如果您的应用程序没有在根上下文路径中运行，或者如果页面不是在根路径中提供，那么您的脚本和样式表引用将不起作用，因为它们是文档相关的。

考虑使用 Theamleaf 的 URL 功能构建 URL，如下所示：

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

<script> 元素也是如此。在那里使用th:src 属性。

查看此处了解更多信息： http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#link-urls

【讨论】：