ssm jsp引入Bootstrap

来源：互联网发布：淘宝网上开网店流程编辑：程序博客网时间：2024/05/21 06:03

1.下载编译过的Bootstrap包和jquery包复制到java web 的根目录

2.编写JSP页面

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %><%

//设置静态资源的跟路径    String path = request.getContextPath();    String basePath = request.getScheme() + "://"            + request.getServerName() + ":" + request.getServerPort()            + path + "/";%><html>  <head>  <meta charset="utf-8">     <title>Bootstrap 实例</title>    <!-- 包含头部信息用于适应不同设备 -->    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- 包含 bootstrap 样式表 必须使用<%=basePath%>跟路径 -->    <link rel="stylesheet" href="<%=basePath%>css/bootstrap.min.css">  </head>  <body>    <div class="container">      <h2>表格</h2>      <p>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外：添加交替单元格的背景色：</p>            <div class="table-responsive">                 <table class="table table-striped table-bordered">         <thead>           <tr>             <th>#</th>             <th>Name</th>             <th>Street</th>           </tr>         </thead>         <tbody>           <tr>             <td>1</td>             <td>Anna Awesome</td>             <td>Broome Street</td>           </tr>           <tr>             <td>2</td>             <td>Debbie Dallas</td>             <td>Houston Street</td>           </tr>           <tr>             <td>3</td>             <td>John Doe</td>             <td>Madison Street</td>           </tr>         </tbody>       </table>      </div>      <h2>图像</h2>      <p>创建响应式图片(将扩展到父元素)。 另外：图片以椭圆型展示：</p>                  <img src="<%=basePath%>img/cinqueterre.jpg" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236">             <h2>图标</h2>      <p>插入图标:</p>            <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p>            <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p>                  <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p>      <p>打印图标: <span class="glyphicon glyphicon-print"></span></p>            <p>下载图标：<span class="glyphicon glyphicon-download"></span></p>          </div>    <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->    <!-- 可选: 包含 jQuery 库 -->    <script src="<%=basePath%>js/jquery/jquery.min.js"></script>    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->    <script src="<%=basePath%>js/bootstrap.min.js"></script>  </body></html>

3.再次访问JSP页面如果静态资源出现404，则增加spring-mvc.xml 配置如下：

<mvc:annotation-driven />
<mvc:resources location="/img/" mapping="/img/**"/>
<mvc:resources location="/fonts/" mapping="/fonts/**"/>
<mvc:resources location="/css/" mapping="/css/**"/>
<mvc:resources location="/js/" mapping="/js/**"/>

阅读全文

0 0