spring mvc配置bootstrap教程

更新時間：2017年07月06日 08:06:53 作者：Chester Huang

這篇文章主要為大家詳細介紹了spring mvc配置bootstrap，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了spring mvc配置bootstrap教程，供大家參考，具體內(nèi)容如下

1.下載bootstrap

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

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

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

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

3.修改web.xml,對客戶端請求的靜態(tài)資源，如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>

如果不添加，會報404錯誤，下面的報錯的url和截圖

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

點擊進去看詳情

4.在web頁面中引用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>

運行效果

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"
  >
<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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

聊聊Java三種常見的分布式鎖
目前分布式鎖的實現(xiàn)方案主要包括三種，本文就來介紹一下這三種常見的分布式鎖以及這三種鎖的性能等，具有一定的參考價值，感興趣的可以了解一下
2023-06-06
Springboot?application.yml配置文件拆分方式
這篇文章主要介紹了Springboot?application.yml配置文件拆分方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-05-05
Springboot中@RequestParam和@PathVariable的用法與區(qū)別詳解
這篇文章主要介紹了Springboot中@RequestParam和@PathVariable的用法與區(qū)別詳解,RESTful API設計的最佳實踐是使用路徑參數(shù)來標識一個或多個特定資源,而使用查詢參數(shù)來對這些資源進行排序/過濾,需要的朋友可以參考下
2024-01-01
java反射深入剖析(推薦)
下面小編就為大家?guī)硪黄猨ava反射深入剖析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
JAVA面向對象之繼承?super入門解析
在JAVA類中使用super來引用父類的成分，用this來引用當前對象，如果一個類從另外一個類繼承，我們new這個子類的實例對象的時候，這個子類對象里面會有一個父類對象。怎么引用里面的父類對象呢？用super來引用，this指當前對象的引用，super是當前對象里面的父對象的引用
2022-01-01
Springboot+redis+Interceptor+自定義annotation實現(xiàn)接口自動冪等
本篇文章給大家介紹了使用springboot和攔截器、redis來優(yōu)雅的實現(xiàn)接口冪等，對于冪等在實際的開發(fā)過程中是十分重要的，因為一個接口可能會被無數(shù)的客戶端調用，如何保證其不影響后臺的業(yè)務處理，如何保證其只影響數(shù)據(jù)一次是非常重要的，感興趣的朋友跟隨小編一起看看吧
2019-07-07
自己寫的簡易版Java日志類分享
這篇文章主要介紹了自己寫的簡易版Java日志類分享,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下
2015-06-06
Spring?Boot提高開發(fā)效率必備工具lombok使用
這篇文章主要為大家介紹了Spring?Boot提高開發(fā)效率的必備工具lombok使用方法示例及步驟說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助
2022-03-03
Spring內(nèi)存緩存Caffeine的基本使用教程分享
Caffeine作為當下本地緩存的王者被大量的應用再實際的項目中，可以有效的提高服務吞吐率、qps，降低rt，本文就來簡單介紹下Caffeine的使用姿勢吧
2023-03-03
springMVC框架下JQuery傳遞并解析Json數(shù)據(jù)
json作為一種輕量級的數(shù)據(jù)交換格式，在前后臺數(shù)據(jù)交換中占據(jù)著非常重要的地位，這篇文章主要介紹了springMVC框架下JQuery傳遞并解析Json數(shù)據(jù)，有興趣的可以了解一下。
2017-01-01