CODEWITHSUNDEEP
csstwitter-bootstrapspring-mvc
pietà
pietà

Reputation: 770

integrate bootstrap template in spring Mvc project

I'm trying to use bootstrap templatein my web application. before I put it on my jsppages , i've made some modifications on the real template .this is what i want to have :

enter image description here

and this is the modifications that I've made so that spring will recognize the css and js files :

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

this is the output :

enter image description here

this is the structure of the project :

enter image description here

and this is the 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>

the image is not displaying ,the same for the icons , and I don't know why it's changed like that ! any help please ?

Upvotes: 0

Views: 2180

Answers (1)

piet&#224;
piet&#224;

Reputation: 770

I resolved the problem by deleting bootstrap.min.css and adding it again to the project. maybe there were a conflict. and i've moved Jquery.jsbefore 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>

hope that it helps someone !

Upvotes: 1

Related Questions