您的位置：首页 > Web前端 > BootStrap

Bootstrap 表格

2016-04-06 16:13 513 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="Author" content="LinDL">
<title>Bootstrap代码</title>
<link href="../bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
<h1 class="page-header">表格<small><table></small></h1>
<h2>默认的表格</h2>
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tr>
<td>zhang</td>
<td>女</td>
<td>21</td>
</tr>
<tr>
<td>huang</td>
<td>男</td>
<td>17</td>
</tr>
</table>
<h2>压缩表格</h2>
<!--实际上是缩小了表格的内间距-->
<table class="table table-condensed">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tr>
<td>zhang</td>
<td>女</td>
<td>21</td>
</tr>
<tr>
<td>huang</td>
<td>男</td>
<td>17</td>
</tr>
</table>
<h2>带边框表格</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tr>
<td>zhang</td>
<td>女</td>
<td>21</td>
</tr>
<tr>
<td>huang</td>
<td>男</td>
<td>17</td>
</tr>
</table>
<h2>奇偶条纹表格</h2>
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tr>
<td>zhang</td>
<td>女</td>
<td>21</td>
</tr>
<tr>
<td>huang</td>
<td>男</td>
<td>17</td>
</tr>
</table>
<h2>悬停高亮表格</h2>
<table class="table table-hover">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tr>
<td>zhang</td>
<td>女</td>
<td>21</td>
</tr>
<tr>
<td>huang</td>
<td>男</td>
<td>17</td>
</tr>
</table>
</div>
<script src="../bootstrap-3.3.5-dist/js/bootstrap.js"></script>
<script src="../bootstrap-3.3.5-dist/js/jquery-2.2.0.min.js"></script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航