Java 如何使用SpringMVC使引导程序工作？_Java_Spring_Spring Mvc_Bootstrap 4

Java 如何使用SpringMVC使引导程序工作？

java spring spring-mvc bootstrap-4

Java 如何使用SpringMVC使引导程序工作？,java,spring,spring-mvc,bootstrap-4,Java,Spring,Spring Mvc,Bootstrap 4,我在bootstrap studio中创建了bootstrap html文件；结构如下：然后我将所有这些文件移到Spring项目中的WEB-INF/view文件夹中，并将它们更改为jsp格式我有一个将“localhost:8080/greeting”url映射到index.jsp的控制器这就是页面的外观：这就是它的实际外观：老实说，我不知道如何在我的spring项目中包括bootstrap，所以我不要求向我解释所有的事情，但我希望有人能给我一些建议，如何让它发挥作用以下是我的

我在bootstrap studio中创建了bootstrap html文件；结构如下：

然后我将所有这些文件移到Spring项目中的WEB-INF/view文件夹中，并将它们更改为jsp格式

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

这就是页面的外观：

这就是它的实际外观：

老实说，我不知道如何在我的spring项目中包括bootstrap，所以我不要求向我解释所有的事情，但我希望有人能给我一些建议，如何让它发挥作用

以下是我的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>


仪表板-Logiweb品牌
切换导航

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

<link rel="stylesheet" href="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>


仪表板-Logiweb品牌
切换导航

您是否将

资产

文件夹和

html

文件一起移动到

WEB-INF/view

文件夹？@Modo是的，我可以看到html文件能够看到资产文件夹，然后使用此

@Modo它已经在那里了。当我以.html页面的形式运行此页面时，它工作正常。您可以编辑问题并发布

…

的全部内容吗？

<%@ 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>