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