开发者学堂课程【前端开发框架Bootstrap使用教程:Bookstrap全局css样式-表格1】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/360/detail/4229
Bookstrap全局css样式-表格1
目录:
一、基本实例
二、条纹状表格
三、带边框的表格
四、鼠标悬停
五、紧缩性表格
六、状态类
一、基本实例
为任意<table> 标签添加. table类可以为其赋予基本的样式—少量的内补( padding )和水平方向的分隔线。这种方式看起来很多余! ?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。
实例:
Optional table caption.
<table class="table">
…
</table>
二、条纹状表格
通过.table-striped 类可以给<tbody> 之内的每一行增加斑马条纹样式。
跨浏览器兼容性
条纹状表格是依赖:nth-child CSS选择器实现的,而这一功能不被Intermet Explorer 8支持。
实例:
<table class="table table-striped">
…
</table>
三、带边框的表格
添加.table-bordered 类为表格和其中的每个单元格增加边框。
实例:
<table class="table table-bordered">
…
</table>
四、鼠标悬停
通过添加. table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover ">
…
</table>
五、紧缩性表格
通过添加.table-condensed 类可以让表格更加紧凑,单元格中的内补( padding )均会减半。
<table class="table table-condensed ">
…
</table>
六、状态类
通过这些状态类可以为行或单元格设置颜色。
Class 描述
.active 鼠标县停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作