您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了spring mvc配置bootstrap教程,供大家參考,具體內(nèi)容如下
1.下載bootstrap
到下面的鏈接下載最新的 http://getbootstrap.com/,我下載的版本是bootstrap-3.3.7-dist
2.解壓bootstrap-3.3.7-dist.zip,把整個(gè)文件夾copy到項(xiàng)目的中。我創(chuàng)建的是maven項(xiàng)目,我的bootstrap資源文件放在webapp\res文件夾下。
bootstrap-3.3.7-dist本身沒有包含jquery.js腳本文件,需要單獨(dú)下載,下載地址http://jquery.com/download/。
具體文件目錄結(jié)構(gòu)請(qǐng)看下圖:
3.修改web.xml,對(duì)客戶端請(qǐng)求的靜態(tài)資源,如js,css等,交由默認(rèn)的servlet處理;*.tff,*.woff,*.woff2是bootstrap的font目錄下的文件后綴。
<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> <!-- 可以應(yīng)答所有請(qǐng)求,也就是將所有的請(qǐng)求都交給Spring的DispatcherServlet來處理 --> <url-pattern>/</url-pattern> </servlet-mapping>
如果不添加,會(huì)報(bào)404錯(cuò)誤,下面的報(bào)錯(cuò)的url和截圖
http://localhost:8080/maven05/res/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.woff2
點(diǎn)擊進(jìn)去看詳情
4.在web頁(yè)面中引用bootstrap
這里沒有使用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" > <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>
運(yùn)行效果
5.如果使用cdn,很簡(jiǎn)單,直接在web頁(yè)面引用即可,不需要配置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" > <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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。