Question

我有一个非常简单的HTML文件，该文件应为用户提供一个选择框，供他/她选择多个选项。

我实际上从纪录片中复制并粘贴了代码，但没有显示任何内容

这是浏览器中显示的代码，所有指向样式和css的链接都有效

<!DOCTYPE html>

<!--TODO make this xmlns entries inserted by the IDE at HTML creation-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>


<div class="jumbotron jumbotron-fluid">
    <div class="container text-center"><h2>Select</h2></div>
</div>
<div class="container">
    <div class="text-center">List</div>
    <form method="post">
        <select title="select" class="selectpicker" multiple>
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
        </select>

    </form>
</div>
<br>
<div class="container">
    <table>
        <tr>
            <th>NAME</th>
            <th>PRICE</th>
            <th>IN STOCK</th>
        </tr>
        <tr>
            <td>BMW</td>
        </tr>
        <tr>
            <td>Mercedes</td>
        </tr>
        <tr>
            <td>Audi</td>
        </tr>

    </table>
</div>
</body>

<footer>
    <script src="/webjars/jquery/3.3.1-1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <!--    <script th:src="@{/mainpage.js}"></script>-->
    <link href="/webjars/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

</footer>
<!-- Latest compiled and minified CSS -->

</html>

，这里是 IDE HTML

<!DOCTYPE html>

<!--TODO make this xmlns entries available per default creation-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>


<div class="jumbotron jumbotron-fluid">
    <div class="container text-center"><h2>Select</h2></div>
</div>
<div class="container">
    <div class="text-center">List</div>
    <form method="post">
        <select title="select" class="selectpicker" multiple>
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
        </select>

    </form>
</div>
<br>
<div class="container">
    <table>
        <tr>
            <th>NAME</th>
            <th>PRICE</th>
            <th>IN STOCK</th>
        </tr>
        <tr th:each="prod : ${cars}">
            <td th:text="${prod}">Onions</td>
        </tr>

    </table>
</div>
</body>

<footer th:replace="template :: footer"></footer>
<!-- Latest compiled and minified CSS -->

</html>

来源

你知道这里是什么问题吗？

enter link description here

Answer 1

您需要将Bootstrap CSS样式表和Javascript文件添加到文档中。

<!DOCTYPE html>

<!--TODO make this xmlns entries available per default creation-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>


<div class="jumbotron jumbotron-fluid">
    <div class="container text-center"><h2>Select</h2></div>
</div>
<div class="container">
    <div class="text-center">List</div>
    <form method="post">
        <select title="select" class="selectpicker" multiple>
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
        </select>

    </form>
</div>
<br>
<div class="container">
    <table>
        <tr>
            <th>NAME</th>
            <th>PRICE</th>
            <th>IN STOCK</th>
        </tr>
        <tr th:each="prod : ${cars}">
            <td th:text="${prod}">Onions</td>
        </tr>

    </table>
</div>
</body>

<footer th:replace="template :: footer"></footer>
<!-- Latest compiled and minified CSS -->

</html>

选项/选择菜单不显示HTML / Bootstrap

1 个答案: