bootstrap中的table组件

表格是bootstrap的一个基础组件之一，bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。
在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍bootstrap的表格使用。

同样的，如果你对css预处理器熟悉，可以使用bootstrap提供的预处理版本：
Less版本，对应的文件是table.less  Sass版本，对应的文件是_table.scss

如果你不懂Less或Sass也无妨，在bootstrap.css文件中第1402行到1630行可以查阅到所有有关table的样式代码。

bootstrap为表格不同的样式风格提供了不同的类名，主要包括：
table:基础表格
table-striped:斑马线表格
table-bordered:带边框的表格
table-hover:鼠标悬停高亮的表格
table-condensed:紧凑型表格
table-responsive:响应式表格

表格---表格行的类
bootstrap为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色。
使用非常简单，只需要在<tr>元素中添加上表对应的类名，就能达到你自己需要的效果:
<tr></tr> 代表白色(默认)
<tr class = "active"></tr>代表灰色
<tr class = "success"></tr>代表绿色
<tr class = "info"></tr>代表蓝色
<tr class = "warning"></tr>代表黄色
<tr class = "danger"></tr>代表红色
颜色对应的源码，在bootstrap.css文件中第1484到1583行。
特别提示:除了"active"之外，其他四个类名与"table-hover"配合使用时，bootstrap针对这几个样式也做了相应的悬浮状态的样式设定。
      所以如果需要给tr元素添加其他颜色的样式时，在table-hover表格中也要做相应的调整。

表格---基础表格
我们只需要在<table>元素中添加class = "table"就可以使用bootstrap提供的基础表格。

表格---斑马线表格
效果：让表格带有背景条纹效果。
代码：<table class = "table table-striped">即可。
 
表格---带表框的表格
效果：让所有单元格都具有一条1px的边框。
代码：<table class = "table table-bordered">即可。
 
表格---鼠标悬浮高亮的表格
效果：当鼠标停在表格中时，高亮显示
代码：<table class = "table table-hover">即可。
 
表格---紧凑型表格
效果：单元格没内距，或者说内距变小
代码：<table class = "table table-condensed">即可。
 
以上4种表格样式可以一起使用。
 
表格---响应式表格
效果：当你的浏览器可视区域768px时，表格底部会出现水平滚动条。当浏览器可视区域大于768px时，水平滚动条就会消失。
代码：<div class = "table-responsive">注意写在table最近的div框中。