个人中心
gpt4 book ai didi

css - 在 spring Mvc 元素中集成 bootstrap 模板

转载 作者：太空宇宙 更新时间：2023-11-04 10:18:55 25 4
gpt4 key购买 nike

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

enter image description here

这是我所做的修改，以便 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>

这是输出:

enter image description here

这是元素的结构:

enter image description here

这是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>

图片不显示，图标也一样，不知道为什么会变成这样!有什么帮助吗？

最佳答案

我通过删除 bootstrap.min.css 并将其重新添加到元素中解决了这个问题。也许有冲突。并且我在 bootstrap.js

之前移动了 Jquery.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>

希望对大家有帮助!

关于css - 在 spring Mvc 元素中集成 bootstrap 模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37003134/

25 4 0
文章推荐： java - 带 session 的 headless Chrome PDF 打印
文章推荐： javascript - 无法分配内存，无法创建子进程 : Do I need to queue the PHP-image requests?
文章推荐： python - 安装Python winshell后Winshell报错win32con not found
文章推荐： java - 将 Perametertype 转换为类不起作用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com