如何使 bootstrap 与 Spring mvc 一起工作？

Question

我在 Bootstrap 工作室中创建了 bootstrap html 个文件；结构如下：

然后我将所有这些文件移动到 WEB-INF/view 文件夹中 Spring 项目结束时将它们更改为 jsp 格式。

我有一个控制器将 'localhost:8080/greeting' url 映射到 index.jsp

页面应该是这样的：

实际情况是这样的：

老实说，我不知道如何将 bootstrap 包含在我的 spring 项目中，所以我不要求向我解释所有内容，但我希望有人可以给我建议如何让它工作。

这是我的 greeting.jsp 文件：

<!DOCTYPE html>
<html style="background: #000514;">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Dashboard - Logiweb Brand</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
</head>

<body id="page-top" style="background: rgb(0,0,0);">
    <div id="wrapper">
        <div class="d-flex flex-column" id="content-wrapper" style="background: #000514;">
            <div class="text-break text-left" id="content" style="background: #000514;"></div>
        </div><a class="border rounded d-inline scroll-to-top" href="#page-top"><i class="fas fa-angle-up"></i></a>
    </div>
    <nav class="navbar navbar-light navbar-expand-md" style="color: var(--pink);background: #d70884;">
        <div class="container-fluid"><a class="navbar-brand" href="#">Brand</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link active" href="#">First Item</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Second Item</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Third Item</a></li>
                </ul>
            </div>
            <div class="dropdown"><a class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown" href="#" style="color: rgb(0,0,0);">Dropdown </a>
                <div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
            </div>
        </div>
    </nav>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
    <script src="assets/js/theme.js"></script>
</body>

</html>

Answer 1

我通过在 link 标签的 href 属性中使用 jsp 标签解决了这个问题。所以我更改了以下内容：

<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

至：

<link rel="stylesheet" href="<c:url value="assets/bootstrap/css/bootstrap.min.css"/>">

所以，答案的完整代码应该如下：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html style="background: #000514;">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Dashboard - Logiweb Brand</title>
    <link rel="stylesheet" href="<c:url value="assets/bootstrap/css/bootstrap.min.css"/>">
    <link rel="stylesheet" href="<c:url value="assets/fonts/fontawesome-all.min.css"/>">
    <link rel="stylesheet" href="<c:url value="assets/fonts/font-awesome.min.css"/>">
    <link rel="stylesheet" href="<c:url value="assets/fonts/fontawesome5-overrides.min.css"/>">
</head>

<body id="page-top" style="background: rgb(0,0,0);">
    <div id="wrapper">
        <div class="d-flex flex-column" id="content-wrapper" style="background: #000514;">
            <div class="text-break text-left" id="content" style="background: #000514;"></div>
        </div><a class="border rounded d-inline scroll-to-top" href="#page-top"><i class="fas fa-angle-up"></i></a>
    </div>
    <nav class="navbar navbar-light navbar-expand-md" style="color: var(--pink);background: #d70884;">
        <div class="container-fluid"><a class="navbar-brand" href="#">Brand</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link active" href="#">First Item</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Second Item</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Third Item</a></li>
                </ul>
            </div>
            <div class="dropdown"><a class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown" href="#" style="color: rgb(0,0,0);">Dropdown </a>
                <div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
            </div>
        </div>
    </nav>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
    <script src="assets/js/theme.js"></script>
</body>

</html>

如何使 bootstrap 与 Spring mvc 一起工作？

How to make bootstrap work with Spring mvc?

java

spring

spring-mvc

bootstrap-4