Bootstrap关于表格

1.Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。

☑  .table：基础表格

☑  .table-striped：斑马线表格

☑  .table-bordered：带边框的表格

☑  .table-hover：鼠标悬停高亮的表格

☑  .table-condensed：紧凑型表格

☑  .table-responsive：响应式表格

2.Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：

.active 表示当前活动的信息

.success 表示成功或者正确的行为

.info 表示中立的信息或行为

.warning 表示警告，需要特别注意

.danger 表示危险或者可能是错误的行为

3.有时候为了让表格更具阅读性，需要将表格制作成类似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表

格效果并不困难，只需要在<table class="table">的基础上增加类名“.table-striped”即可.

4.基础表格仅让表格部分地方有边框，但有时候需要整个表格具有边框效果。Bootstrap出于实际运用，也考虑这种表格效果，即所有单元格具有一条1px的边框。 Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似，只需要在基础表格<table class="table">基础上添加一个“.table-bordered”类名即可

5. 表格--鼠标悬浮高亮的表格：当鼠标悬停在表格的行上面有一个高亮的背景色，这样的表格让人看起来就是舒服，时刻告诉用户正在阅读表格哪一行的数据。Bootstrap的确没有让你失望，他也考虑到这种效果，其提供了一个“.table-hover”类名来实现这种表格效果。

6. 表格--紧凑型表格：要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中，通过类名“table-condensed”重置

了单元格内距值。

7. 表格--响应式表格：Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。设置类名“.table-responsive”。