bootstrap--表格（table的各种样式）

 

目录

bootstrap--表格（table的各种样式）

---

Bootstrap 表格类样式

☑  .table：基础表格，为任意 

 添加基本样式 (只有横向分隔线)

☑  .table-striped：斑马线表格

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

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

☑  .table-condensed：紧凑型表格

☑  .table-responsive：响应式表格

1、“.table”主要有三个作用：

  ☑  给表格设置了单元内距及底部边距margin-bottom:20px

  ☑  在thead底部设置了一个2px的浅灰实线

  ☑  每个单元格顶部设置了一个1px的浅灰实线

样式图如下：

2、table-striped：斑马线表格

样式图如下：

3、table-bordered：带边框的表格

样式图如下：

4、table-hover：鼠标悬停高亮的表格

样式图如下：

5、table-condensed：紧凑型表格(单元格的内距由8px调至5px。)

样式图如下：

6、table-responsive：响应式表格(当浏览器可视区域小于768px时，表格底部会出现水平滚动条；可视区域大于768px时，表格底部水平滚动条就会消失)

样式图如下：

7、综合应用

样式图如下：

源代码如下：

	
表格
	
联合使用所有表格类:
                                          
	

#	Firstname
1	Anna
2	Debbie
3	John

Bootstrap的JS,CSS等我就不贴出来了，自行引入，具体可参考Bootstrap 中文网

8、状态类：这些状态类可以为行或单元格设置颜色。

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.info	标识普通的提示信息或动作
.success	标识成功或积极的动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作