Question

我在引用URL引导链接（“https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css”）时已成功使用百万美元片段。我一直在使用th：替换我的所有文件，并且没有问题将html片段发送到我的其他文件。

我已经尝试过切换到BootSwatch，让我的Java应用程序更好看，并遇到了一个问题。问题是引导程序仅适用于我的index.html文件，而不适用于我的其他文件。由于索引文件正在使用片段中的引导程序设计，我认为它是正确连接的。此外，我的应用程序的所有其他部分工作。为简洁起见，我没有包含所有的html文件。

我使用完全相同的东西：替换我的所有文件，所以我不确定问题是什么。

fragments.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
    <meta charset="UTF-8"/>
    <title th:text = "${title}"></title>

    <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">-->

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

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

</head>


<nav class="navbar navbar-expand-lg navbar-dark bg-primary" th:fragment="navigation">
    <a class="navbar-brand" href="#">Store</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/cheese">List</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/cheese/add">Add</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/cheese/remove">Remove</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/cheese/account">Account</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/cheese/signup">Signup</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<body>

</body>
</html>

的index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{fragments/main_layout}">

<head th:replace="fragments :: head"></head>
<body>

<nav th:replace="fragments :: navigation"></nav>

<h1 th:text="${title}">Add Cheeses</h1>
<p th:unless = "${cheeses} and ${cheeses.size()}">No Cheeses :(</p>

<table class="table">

    <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Price</th>
    </tr>

    <tr th:each ="cheese : ${cheeses}">
        <td th:text ="${cheese.name}"></td>
        <td th:text ="${cheese.description}"></td>
        <td th:text ="${cheese.price}"></td>
    </tr>
</table>

</body>
</html>

add.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{fragments/main_layout}">

<head th:replace="fragments :: head"></head>
<body>

<nav th:replace="fragments :: navigation"></nav>

<h1 th:text="${title}">Add Cheeses</h1>

<form method="post" style="max-width:600px;">

    <div class="form-group">
        <label for="name-field">Name</label>
        <input class="form-control" id="name-field" type="text" name="cheeseName" />
    </div>

    <div class="form-group">
        <label for="desc-field">Description</label>
        <input class="form-control" id="desc-field" type="text" name="cheeseDescription" />
    </div>

    <div class="form-group">
        <label for="price-field">Price</label>
        <input class="form-control" id="price-field" type="text" name="cheesePrice" />
    </div>

    <button type="submit" class="btn btn-primary">Add Cheese</button>

</form>

</body>
</html>

Answer 1

所以，我实际上发现Bootswatch还有一个bootstrap CDN。我只是用URL引导程序链接替换了本地css文件，它运行正常。

ThymeLeaf片段（使用Bootstrap）仅适用于索引文件，而不适用于其他html文件（Java Spring）

1 个答案: