bootstrap表格的使用方法
1、表格的基本用法：
构建bootstrap表格的基础样式是通过给<table>标签添加class=“table”来实现的。
注意，bootstrap的表格默认样式是不带边框和分隔的。
具体实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的使用</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<th>张三</th>
<th>年龄</th>
<th>程序员</th>
</tr>
<tr>
<th>李四</th>
<th>23</th>
<th>营运专员</th>
</tr>
</table>
</body>
</html>
效果如图：
1、.table-bordered : 为表格加上边框
例子：（注意要引入bootstrap，具体查看上面第一步）
html/css部分：
<table class="table table-bordered">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<th>张三</th>
<th>年龄</th>
<th>程序员</th>
</tr>
<tr>
<th>李四</th>
<th>23</th>
<th>营运专员</th>
</tr>
</table>
效果如图：
2、.table-striped ：为表格加上斑马线
效果例子：
html部分：
<table class="table table-striped">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<th>张三</th>
<th>年龄</th>
<th>程序员</th>
</tr>
<tr>
<th>李四</th>
<th>23</th>
<th>营运专员</th>
</tr>
</table>
效果如图：
3、.table-hover：鼠标悬停在表格上时，出现不同的背景色
例子：
html部分：
<table class="table table-hover">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<th>张三</th>
<th>年龄</th>
<th>程序员</th>
</tr>
<tr>
<th>李四</th>
<th>23</th>
<th>营运专员</th>
</tr>
</table>
效果如图：
4、.table-condensed：设置更为紧凑的表格样式。
例子：
html部分：
<table class="table table-condensed">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<th>张三</th>
<th>年龄</th>
<th>程序员</th>
</tr>
<tr>
<th>李四</th>
<th>23</th>
<th>营运专员</th>
</tr>
</table>
效果如图1：
四种样式可以叠加使用，具体如下：
<table class="table table-bordered table-striped table-hover table-condensed">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<th>张三</th>
<th>年龄</th>
<th>程序员</th>
</tr>
<tr>
<th>李四</th>
<th>23</th>
<th>营运专员</th>
</tr>
</table>
效果如图2:
1、响应式表格是bootstrap3新增的特性，可以让较宽的表格在小屏幕设备上（小于768px）出现水平滚动条。但屏幕宽度大于768px时，水平滚动条消失。
使用方法：
把表格包裹在一个class=“table-responsive”的元素中即可，具体如下：
html：
<div class="table-responsive">
<table class="table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<th>张三</th>
<th>年龄</th>
<th>程序员</th>
<th>张三</th>
<th>年龄</th>
<th>程序员</th>
<th>张三</th>
<th>年龄</th>
<th>程序员</th>
<th>张三</th>
<th>年龄</th>
<th>程序员</th>
<th>张三</th>
<th>年龄</th>
<th>程序员</th>
</tr>
<tr>
<th>李四</th>
<th>23</th>
<th>营运专员</th>
<th>李四</th>
<th>23</th>
<th>营运专员</th>
<th>李四</th>
<th>23</th>
<th>营运专员</th>
<th>李四</th>
<th>23</th>
<th>营运专员</th>
<th>李四</th>
<th>23</th>
<th>营运专员</th>
</tr>
</table>
</div>
效果如图：
