表格:bootstrap为表格提供了1种基础样式和4种附加样式以及一个支持响应式的表格。主要包括:
.table:基础表格
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格
表格行的类:bootstrap还为表格行元素tr提供了五种不同的类名,每种类名控制了行的不同背景颜色:
.active:表示当前活动的颜色,#f5f5f5;
.success:表示成功或者正确的行为
.info:表示中立的信息或者行为
.warning:表示警告,需要特别提醒
.danger:表示危险或者可能是错误的行为
注意:除了.active之外,其他的四种类型和".table-hover"配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要的tr元素添加其他颜色的样式时,在.table-hover表格中也要做相应的调整。
要实现悬浮状态,需要在table标签上加上.table-hover类。
表格----基础表格:
在bootstrap中,对于基础表格是通过类名.table来控制,.table主要有三个作用:
1.给表格设置margin-bottom:20px以及设置单元内距
2.在thead底部设置了一个2px的浅灰色实线
3.每个单元格顶部设置了一个1px的浅灰色实线
表格----斑马线表格
斑马线表哥就是让表格带有背景条纹效果,在bootstrap中实现这种表格效果并不困难,只需要在<table class="table">的基础上增加类名".table-striped"即可。
其效果与基础表格相比,仅仅是在tbody隔行有一个浅灰色的背景色。
表格---带边框的表格:
即所有的单元格具有一条1px的边框。只需要在<table class="table">基础上添加一个.table-bordered
表格----鼠标悬浮在高亮的表格
当鼠标悬停在表格的行上面有一个高亮的背景色,这样的表格让人看起来就是舒服,只要在<table class="table">添加类名.table-hover即可,
其效果就是当你鼠标悬停在某一个单元格上是,单元格所在的行的背景色都虎变成浅灰色。
表格----紧凑型表格:
就是单元格内距或者内距较其他表格的内距更小。只需要在<table class="table">中添加了table-condensed
注意:大家在使用bootstrap表格时,千万注意,<table>元素中一定不能缺少类名table
表格----响应式表格:
只需要在<table class="table">中添加.table-responsive,此容器就是响应式容器,当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条,当你的浏览器可视区域大于768px,表格底部水平滚动条就会消失。