下载地址文档地址
（1）复制bootstrap的内容到webapp文件夹
（2）在页面引入
（3）使用项目访问路径 ${path}
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet"> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="${pageContext.request.contextPath}/js/jquery-1.11.0.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script> </body> </html> （4）设置spring-mvc的静态资源拦截规则 <!--过滤静态资源 .js .css png--> <!--方式一--> <mvc:resources location="/css/" mapping="/css/**" /> <mvc:resources location="/images/" mapping="/images/**" /> <mvc:resources location="/js/" mapping="/js/**" /> <mvc:resources location="/fonts/" mapping="/fonts/**" /> ------------------------------------------------------------ <!--方式二--> <mvc:default-servlet-handler/> （5）测试 css样式需要在布局容器中使用 <div class="container"> ... </div>页面布局控制 栅格参数 使用示例:
效果图 代码:
<div class="container"> <div class="row clearfix"> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </div> </div>