表格是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框中。
