基本实例
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-striped">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th>邮箱</th>
</tr>
<tr>
<td>1</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr>
<td>2</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr>
<td>3</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr>
<td>4</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr>
<td>5</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
</table>
</div>
</body>
</html>
重点：在table上添加class 为table ，如果想要带斑马线的效果在class上追加.table-striped
<table class="table table-striped">
条纹.png
有边框的表格：在table的calss上添加 table-bordered
<table class="table table-bordered">
带边框的table
条纹+边框的表格：class="table table-striped table-bordered"
<table class="table table-striped table-bordered">
条纹+边框
鼠标在表格悬停：table-hover
<table class="table table-hover table-bordered">
image.png
表格缩紧：table-condensed。
<table class="table table-hover table-bordered table-condensed">
表格数据状态，底色
image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-hover table-bordered table-condensed">
<tr >
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th>邮箱</th>
</tr>
<tr class=" alert-danger">
<td>1</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr class="active">
<td>2</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr class="warning">
<td>3</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr class="success">
<td>4</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr class="info">
<td>5</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
</table>
</div>
</body>
</html>
