Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于 HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美,可用于快速、简单地 构建基于 PC 及移动端设备的 Web 页面需求。
这里利用bootstrap做出一个表格以及分页的静态页面。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!--导入bootstrap.css-->
<link rel="stylesheet" type="text/css" href="asserts/bootstrap/css/bootstrap.css" />
</head>
<body>
<!--利用bootstrap限定范围-->
<div class="container">
<!--表格-->
<!--table-bordered:为所有表格的单元格添加边框 table-striped:在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)-->
<table class="table table-bordered table-striped">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>手机号</th>
<th width="20%">操作</th>
</tr>
<tr>
<td>0001</td>
<td>0002</td>
<td>0003</td>
<td>0004</td>
<td>0005</td>
<td>
<!--btn-primary:原始按钮样式(未被操作) btn-xs: 制作一个超小按钮-->
<a href="" class="btn btn-primary btn-xs">
<!--glyphicon:字体图标-->
<span class="glyphicon glyphicon-info-sign"></span> 详情
</a>
<a href="" class="btn btn-info btn-xs">
<span class="glyphicon glyphicon-edit"></span> 编辑
</a>
<a href="" class="btn btn-danger btn-xs">
<span class="glyphicon glyphicon-remove"></span> 删除
</a>
</td>
</tr>
<tr>
<td>0001</td>
<td>0002</td>
<td>0003</td>
<td>0004</td>
<td>0005</td>
<td>
<a href="" class="btn btn-primary btn-xs">
<span class="glyphicon glyphicon-info-sign"></span> 详情
</a>
<a href="" class="btn btn-info btn-xs">
<span class="glyphicon glyphicon-edit"></span> 编辑
</a>
<a href="" class="btn btn-danger btn-xs">
<span class="glyphicon glyphicon-remove"></span> 删除
</a>
</td>
</tr>
<tr>
<td>0001</td>
<td>0002</td>
<td>0003</td>
<td>0004</td>
<td>0005</td>
<td>
<a href="" class="btn btn-primary btn-xs">
<span class="glyphicon glyphicon-info-sign"></span> 详情
</a>
<a href="" class="btn btn-info btn-xs">
<span class="glyphicon glyphicon-edit"></span> 编辑
</a>
<a href="" class="btn btn-danger btn-xs">
<span class="glyphicon glyphicon-remove"></span> 删除
</a>
</td>
</tr>
</table>
<div class="text-center">
<!--分页链接-->
<!--pagination:分页-->
<ul class="pagination pagination-sm">
<li class="disabled">
<a href="javascript:void(0)"><span>«</span></a>
</li>
<li class="active">
<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="">...</a>
</li>
<li>
<a href="">99</a>
</li>
<li>
<a href="">100</a>
</li>
<li>
<a href=""><span>»</span></a>
</li>
</ul>
</div>
<div class="text-center">
<!--pager:翻页 默认链接是居中显示-->
<ul class="pager">
<!--previous:居左-->
<li class="previous">
<a href="">上一页</a>
</li>
<!--next:居右-->
<li class="next">
<a href="">下一页</a>
</li>
</ul>
</div>
</div>
</body>
</html>