利用Bootstrap做出简易表格

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>&laquo;</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>&raquo;</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>

利用Bootstrap做出简易表格

猜你喜欢