本文实例为大家分享了spring mvc配置引导教程,供大家参考,具体内容如下
<强> 1。下载引导
到下面的链接下载最新的http://getbootstrap.com/,我下载的版本是bootstrap-3.3.7-dist
<强> 2。解压bootstrap-3.3.7-dist.zip, 把整个文件夹复制到项目的中。我创建的是maven项目,我的引导资源文件放在webapp \ res文件夹下。
bootstrap-3.3.7-dist本身没有包含jquery.js脚本文件,需要单独下载,下载地址http://jquery.com/download/?/p>
具体文件目录结构请看下图:
3。修改web . xml,对客户端请求的静态资源,如js, css等,交由默认的servlet处理;* .tff, * .woff, * .woff2是引导的字体目录下的文件后缀。
& lt; servlet-mapping>
& lt; servlet-name> default
& lt; url-pattern> * .jpg
& lt;/servlet-mapping>
& lt; servlet-mapping>
& lt; servlet-name> default
& lt; url-pattern> * .js
& lt;/servlet-mapping>
& lt; servlet-mapping>
& lt; servlet-name> default
& lt; url-pattern> * .css
& lt;/servlet-mapping>
& lt; servlet-mapping>
& lt; servlet-name> default
& lt; url-pattern> * .html
& lt;/servlet-mapping>
& lt; servlet-mapping>
& lt; servlet-name> default
& lt; url-pattern> * .ttf
& lt;/servlet-mapping>
& lt; servlet-mapping>
& lt; servlet-name> default
& lt; url-pattern> * .woff
& lt;/servlet-mapping>
& lt; servlet-mapping>
& lt; servlet-name> default
& lt; url-pattern> * .woff2
& lt;/servlet-mapping>
& lt; servlet-mapping>
& lt; servlet-name> springDispatcherServlet
& lt; !——可以应答所有请求,也就是将所有的请求都交给春天的DispatcherServlet来处理——比;
& lt; url-pattern>/& lt;/url-pattern>
& lt;/servlet-mapping>
之前
如果不添加,会报404错误、下面的报错的url和截图
http://localhost: 8080/maven05/res/bootstrap-3.3.7-dist/字体/glyphicons-halflings-regular.woff2
点击进去看详情
4。在web页面中引用引导
这里没有使用cdn,直接引用本地文件
% @ & lt;页面语言=癹ava”contentType=" text/html;charset=utf - 8”
pageEncoding=" utf - 8 " %比;
& lt; !DOCTYPE html公共”——//W3C html 4.01过渡//EN//DTD”“http://www.w3.org/TR/html4/loose.dtd”的在
& lt; html>
& lt; head>
& lt; title>插入标题here
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt; !——引用本地资源——比;
& lt;链接rel="样式表"
href=" https://www.yisu.com/zixun/res/bootstrap-3.3.7-dist/css/bootstrap.min.css "比;
& lt;脚本
src=" https://www.yisu.com/zixun/res/bootstrap-3.3.7-dist/js/jquery.min.js "祝辞& lt;/script>
& lt;脚本
src=" https://www.yisu.com/zixun/res/bootstrap-3.3.7-dist/js/bootstrap.min.js "祝辞& lt;/script>
& lt; !——引用cdn资源——比;
& lt; !——& lt;链接rel="样式表"
href=" http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css "比;
& lt;脚本
src=" http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js "祝辞& lt;/script>
& lt;脚本
src=" http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js "祝辞& lt;/script>——比;
& lt;/head>
& lt; body>
& lt; p>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default”比;
& lt;跨类=" glyphicon glyphicon-sort-by-attributes”祝辞& lt;/span>
& lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default”比;
& lt;跨类=" glyphicon glyphicon-sort-by-attributes-alt”祝辞& lt;/span>
& lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default”比;
& lt;跨类=" glyphicon glyphicon-sort-by-order”祝辞& lt;/span>
& lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default”比;
& lt;跨类=" glyphicon glyphicon-sort-by-order-alt”祝辞& lt;/span>
& lt;/button>
& lt;/p>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default btn-lg”比;
& lt;跨类=" glyphicon glyphicon-user”祝辞& lt;/span>用户
& lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default btn-sm”比;
& lt;跨类=" glyphicon glyphicon-user”祝辞& lt;/span>用户
& lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default btn-xs”比;
& lt;跨类=" glyphicon glyphicon-user”祝辞& lt;/span>用户
& lt;/button>
& lt;/body>
& lt;/html>
