spring mvc 配置bootstrap的具體步驟詳解

1. spring mvc 配置bootstrap的具體步驟詳解，分下面幾步，喜歡的朋友可以關註一下。
   

2. 1.下載bootstrap

#到下面的連結下載最新的，我下載的版本是bootstrap-3.3.7- dist

【相關影片推薦：Bootstrap教學】

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

bootstrap-3.3.7-dist本身沒有包含jquery.js腳本文件，需要單獨下載，下載地址。

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

 

3.修改web.xml,對客戶端請求的靜態資源，如js,css等，交由預設的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><!-- 可以应答所有请求，也就是将所有的请求都交给Spring的DispatcherServlet来处理 --><url-pattern>/</url-pattern></servlet-mapping>

#View Code

 

 

############################### #如果不加，會報404錯誤，下面的報錯的url和截圖######http://localhost:8080/maven05/res/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular .woff2############### 點選進去看詳情###### ######### ###### ######4.在web頁面中引用bootstrap######這裡沒有使用cdn，直接引用本機檔案###############

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><title>Insert title here</title><meta><!-- 引用本地资源 --><link><scriptsrc><scriptsrc><!-- 引用cdn资源 --><!-- <link rel="stylesheet"
    href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css?1.1.11">
<script
    src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js?1.1.11"></script>
<script
    src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js?1.1.11"></script> --><p><button><span></span></button><button><span></span></button><button><span></span></button><button><span></span></button></p>
<button><span></span> User</button><button><span></span> User</button><button><span></span> User</button></scriptsrc></scriptsrc>

#######View Code########################################### #### ######　　運作效果################ ######5.如果使用cdn，很簡單，直接在web頁引用即可，不需要設定web.xml###############

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><title>Insert title here</title><meta><!-- 引用本地资源 --><!-- <link rel="stylesheet"
    href="res/bootstrap-3.3.7-dist/css/bootstrap.min.css?1.1.11">
<script
    src="res/bootstrap-3.3.7-dist/js/jquery.min.js?1.1.11"></script>
<script
    src="res/bootstrap-3.3.7-dist/js/bootstrap.min.js?1.1.11"></script> --><!-- 引用cdn资源 --><link><scriptsrc><scriptsrc><p><button><span></span></button><button><span></span></button><button><span></span></button><button><span></span></button></p>
<button><span></span> User</button><button><span></span> User</button><button><span></span> User</button></scriptsrc></scriptsrc>

######View Code######### ###

以上是spring mvc 配置bootstrap的具體步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！