spring mvc 配置bootstrap

時間 2019-11-17

標籤 spring mvc 配置 bootstrap 欄目 Spring 简体版

原文原文鏈接

1.下載bootstrapcss

到下面的連接下載最新的 http://getbootstrap.com/，我下載的版本是bootstrap-3.3.7-disthtml

2.解壓bootstrap-3.3.7-dist.zip,把整個文件夾copy到項目的中。我建立的是maven項目，個人bootstrap資源文件放在webapp\res文件夾下。java

bootstrap-3.3.7-dist自己沒有包含jquery.js腳本文件，須要單獨下載，下載地址http://jquery.com/download/。jquery

具體文件目錄結構請看下圖：web

3.修改web.xml,對客戶端請求的靜態資源，如js,css等，交由默認的servlet處理；*.tff,*.woff,*.woff2是bootstrap的font目錄下的文件後綴。spring

<servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.jpg</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.js</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.ttf</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.woff</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.woff2</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>springDispatcherServlet</servlet-name>
        <!-- 能夠應答全部請求，也就是將全部的請求都交給Spring的DispatcherServlet來處理 -->
        <url-pattern>/</url-pattern>
    </servlet-mapping>

View Code

若是不添加，會報404錯誤，下面的報錯的url和截圖bootstrap

http://localhost:8080/maven05/res/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.woff2app

點擊進去看詳情webapp

4.在web頁面中引用bootstrapmaven

這裏沒有使用cdn，直接引用本地文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引用本地資源 -->
<link rel="stylesheet"
    href="res/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script
    src="res/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script
    src="res/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- 引用cdn資源 -->
    <!-- <link rel="stylesheet"
    href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
    src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
    src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
</head>
<body>

    <p>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-sort-by-attributes"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-sort-by-order"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-sort-by-order-alt"></span>
        </button>
    </p>
    <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
    <button type="button" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
    <button type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
</body>
</html>

View Code

　　運行效果

5.若是使用cdn，很簡單，直接在web頁面引用便可，不須要配置web.xml

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引用本地資源 -->
<!-- <link rel="stylesheet"
    href="res/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script
    src="res/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script
    src="res/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> -->
    <!-- 引用cdn資源 -->
    <link rel="stylesheet"
    href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
    src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
    src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

    <p>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-sort-by-attributes"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-sort-by-order"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-sort-by-order-alt"></span>
        </button>
    </p>
    <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
    <button type="button" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
    <button type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
</body>
</html>