bootstrap条纹边框悬停表格的使用
1、首先看下bootstrap普通的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 测试</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-2.0.3.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<table class="table" style="width:400px">
<caption>普通表格布局</caption>
<thead>
<tr>
<th>学校</th>
<th>地区</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>小学</td>
<td>南京</td>
<td>200</td>
</tr>
<tr>
<td>初中</td>
<td>南京</td>
<td>300</td>
</tr>
<tr>
<td>小学</td>
<td>上海</td>
<td>500</td>
</tr>
</tbody>
</table>
</body>
</html>
引用bootstrap.min.css、jquery-2.0.3.js和bootstrap.min.js
添加class="table"
打开浏览器测试看下效果
2、使用条纹表格可以间隔显示表格背景色，像斑马线，最主要的是添加bootstrap自带的class属性
class="table table-striped"
3、边框表格最主要的是添加bootstrap自带的class属性
class="table table-bordered"，添加次属性之后，可以自动给表格添加显示边框
4、悬停表格可以在鼠标的光标停留在某一个行时显示高亮背景，最主要的是添加bootstrap自带的class属性
class="table table-hover"
5、bootstrap已经给我们定义好了成功、警告、危险不同级别的颜色显示，我们直接使用就可以
class="success"
class="warning"
class="danger"
6、<table class="table" style="width:400px">
<caption>不同级别颜色显示</caption>
<thead>
<tr>
<th>级别</th>
<th>类别</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>成功</td>
</tr>
<tr class="warning">
<td>2</td>
<td>警告</td>
</tr>
<tr class="danger">
<td>3</td>
<td>危险</td>
</tr>
</tbody>
</table>
