spring mvc 配置bootstrap
1.下载bootstrap
到下面的链接下载最新的 http://getbootstrap.com/，我下载的版本是bootstrap-3.3.7-dist
2.解压bootstrap-3.3.7-dist.zip,把整个文件夹copy到项目的中。我创建的是maven项目，我的bootstrap资源文件放在webapp\res文件夹下。
bootstrap-3.3.7-dist本身没有包含jquery.js脚本文件，需要单独下载，下载地址http://jquery.com/download/。
具体文件目录结构请看下图：
3.修改web.xml,对客户端请求的静态资源，如js,css等，交由默认的servlet处理；*.tff,*.woff,*.woff2是bootstrap的font目录下的文件后缀。
<servlet-mapping><servlet-name>default</servlet-name><url-patte>*.jpg</url-patte></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-patte>*.js</url-patte></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-patte>*.css</url-patte></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-patte>*.html</url-patte></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-patte>*.ttf</url-patte></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-patte>*.woff</url-patte></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-patte>*.woff2</url-patte></servlet-mapping><servlet-mapping><servlet-name>springDispatcherServlet</servlet-name><!-- 可以应答所有请求，也就是将所有的请求都交给Spring的DispatcherServlet来处理 --><url-patte>/</url-patte></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"><scriptsrc="res/bootstrap-3.3.7-dist/js/jquery.min.js"></script><scriptsrc="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"><scriptsrc="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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"><scriptsrc="res/bootstrap-3.3.7-dist/js/jquery.min.js"></script><scriptsrc="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"><scriptsrc="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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>
来源链接：https://www.cnblogs.com/dongdonggege/p/7122315.html
版权声明：
1、JavaClub（https://www.javaclub.cn）以学习交流为目的，由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容，包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网，本站不享有版权，版权归原作者所有。
2、本站提供的内容仅用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容，请及时通知本站（javaclubcn@163.com），我们将第一时间核实后及时予以删除。
