Question

我正在尝试在我的网络应用程序中使用bootstrap template。在我把它放在我的jsp页面上之前，我已经对真实模板进行了一些修改。这就是我想要的：

这是我所做的修改，以便spring能够识别css和js文件：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<spring:url value="/resources/core/css/theme.css" var="themecss" />
<link href="${themecss}" rel="stylesheet" />

<spring:url value="/resources/core/css/bootstrap.min.css"
var="bootstrap" />
<link href="${bootstrap}" rel="stylesheet" />

<spring:url value="/resources/core/css/bootstrap-responsive.min.css"
var="bootstrapresp" />
<link href="${bootstrapresp}" rel="stylesheet" />

<spring:url value="/resources/core/css/font-awesome.css" var="aws" />
<link href="${aws}" rel="stylesheet" />



<title>Home</title>
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse"
                data-target=".navbar-inverse-collapse"> <i
                class="icon-reorder shaded"></i></a><a class="brand" href="#">Edmin
            </a>
            <div class="nav-collapse collapse navbar-inverse-collapse">

                <ul class="nav pull-right">
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                        data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Item No. 1</a></li>
                            <li><a href="#">Don't Click</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Example Header</li>
                            <li><a href="#">A Separated link</a></li>
                        </ul></li>
                    <li><a href="#">Support </a></li>
                    <li class="nav-user dropdown"><a href="#"
                        class="dropdown-toggle" data-toggle="dropdown">
                         <img src="resources/core/images/user.png" />
                         <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Your Profile</a></li>
                            <li><a href="#">Edit Profile</a></li>
                            <li><a href="#">Account Settings</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Logout</a></li>
                        </ul></li>
                </ul>
            </div>
            <!-- /.nav-collapse -->
        </div>
    </div>
    <!-- /navbar-inner -->
</div>
<!-- /navbar -->
<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="span3">
                <div class="sidebar">
                    <ul class="widget widget-menu unstyled">
                        <li class="active"><a href="index.html"><i
                                class="menu-icon icon-dashboard"></i>Dashboard </a></li>
                        <li><a href="activity.html"><i
                                class="menu-icon icon-bullhorn"></i>News Feed </a></li>
                        <li><a href="message.html"><i
                                class="menu-icon icon-inbox"></i>Inbox <b
                                class="label green pull-right"> 11</b> </a></li>
                        <li><a href="task.html"><i class="menu-icon icon-tasks"></i>Tasks
                                <b class="label orange pull-right"> 19</b> </a></li>
                    </ul>
                    <!--/.widget-nav-->

                </div>
                <!--/.sidebar-->
            </div>
            <!--/.span3-->
            <div class="span9">
                <div class="content">


                    <div class="module">
                        <div class="module-head">
                            <h3>Profit Chart</h3>
                        </div>
                        <div class="module-body">
                            <div class="chart inline-legend grid">
                                <div id="placeholder2" class="graph" style="height: 500px">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/.module-->
                    <div class="module hide">
                        <div class="module-head">
                            <h3>Adjust Budget Range</h3>
                        </div>
                        <div class="module-body">
                            <div class="form-inline clearfix">
                                <a href="#" class="btn pull-right">Update</a> <label
                                    for="amount"> Price range:</label> &nbsp; <input type="text"
                                    id="amount" class="input-" />
                            </div>
                            <hr />
                            <div class="slider-range"></div>
                        </div>
                    </div>

                </div>
                <!--/.content-->
            </div>
            <!--/.span9-->
        </div>
    </div>
    <!--/.container-->
</div>
<!--/.wrapper-->
<div class="footer">
    <div class="container">
        <b class="copyright">&copy; 2016 ERICSSON </b>Tunisia Branch.
    </div>
</div>
<spring:url value="/resources/core/js/bootstrap.min.js"
var="bootstrapJs" />
<script src="${bootstrapJs}"></script>

<spring:url value="/resources/core/js/jquery-1.12.2.min.js" var="JQuery" />
<script src="${JQuery}"></script>

<spring:url value="/resources/core/js/jquery-ui-1.10.1.custom.min.js"
var="JQueryCustom" />
<script src="${JQueryCustom}"></script>

</body>
</html>

这是输出：

这是项目的结构：

这是spring-mvc-servlet

    <mvc:resources mapping="/resources/**" location="/resources/" />
    <mvc:resources mapping="/images/**" location="/resources/core/images/" />
<mvc:annotation-driven />
    <bean id="viewResolver"
    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="viewClass"
        value="org.springframework.web.servlet.view.JstlView" />

    <property name="prefix">
        <value>/WEB-INF/views/jsp/</value>
    </property>
    <property name="suffix">
        <value>.jsp</value>
    </property>
 </bean>

图像没有显示，图标也一样，我不知道为什么会这样改变！有什么帮助吗？

Answer 1

我通过删除bootstrap.min.css并将其再次添加到项目中来解决问题。也许有冲突。我在Jquery.js

之前移动了bootstrap.js

<spring:url value="/resources/core/js/jquery-1.12.2.min.js" var="JQuery" />
<script src="${JQuery}"></script>

<spring:url value="/resources/core/js/bootstrap.min.js"
var="bootstrapJs" />
<script src="${bootstrapJs}"></script>

<spring:url value="/resources/core/js/jquery-ui-1.10.1.custom.min.js"
var="JQueryCustom" />
<script src="${JQueryCustom}"></script>

希望它可以帮到某人！

在Spring Mvc项目中集成bootstrap模板

1 个答案: