SpringMVC如何使用bootstrap列表展示list数据
1、新建一个页面list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH} /static/js/jquery-3.2.1.min.js"></script>
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
2、搭建bootstrap显示页面：
首先建立一个四行的布局
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH} /static/js/jquery-3.2.1.min.js"></script>
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<body>
<div class="container">
<!-- 标题行 -->
<div class="row">
</div>
<!-- 按钮 -->
<div class="row"></div>
<!-- 显示表格 -->
<div class="row"></div>
<!-- 显示分页信息 -->
<div class="row"></div>
</div>
</body>
</html>
3、让标题占满整个12列
<!-- 标题行 -->
<div class="row">
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
</div>
4、查看页面效果
5、让按钮占满整个4列，然后偏移8列
<!-- 按钮 -->
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary">新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
6、让表格占满整个12列：
<!-- 显示表格 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>department</th>
<th>
操作
</th>
</tr>
<tr>
<th>1</th>
<th>qe</th>
<th>mr</th>
<th>gwolf_2010@126.com</th>
<th>技术部</th>
<th>
<button type="button" class="btn btn-primary btn-sm" aria-label="Left Align">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span>
编辑
</button>
<button type="button" class="btn btn-danger btn-sm" aria-label="Left Align">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
删除
</button>
</th>
</tr>
</table>
</div>
</div>
7、设置list分页条
<!-- 显示分页信息 -->
<div class="row">
<div class="col-md-6">
当前记录数
</div>
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="#">首页</a></li>
<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>
<li><a href="#">末页</a></li>
</ul>
</nav>
</div>
</div>
</div>
