开发者学堂课程【前端开发框架 Bootstrap 使用教程:11-Bootstrap 全局 CSS 样式-表格2】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/360/detail/4230
11-Bootstrap 全局 CSS 样式-表格2
目录
一、状态类
二、响应式
一、状态类
通过这些状态类可以为行为或单元格设置颜色
Class |
描述 |
.active |
鼠标易停在行或单元格上时所设置的颜色 |
.success |
标识成功或犯报的动作 |
|
|
.info |
标识普通的提示信息或动 |
.warning |
标识警告或需要用户注意 |
.danger |
标识危险或潜在的带来负面影响的动作 |
向使用辅助技术的用户传达用意
通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现,并不能为使用辅助技术--例如屏幕阅读器--浏览网页的用户提供更多信息。因此,请确保通过颜色而赋予的不同意义可以通过内容本身来表达(即在相应行或单元格中的可见的文本内容);或者通过包含额外的方式 -- 例如应用了.sr-only 类而隐藏的文本一来表达出来。
二、响应式表格
将任何.table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px 宽度时,水平滚动条消失。
垂直方向的内容截断
响应式表格使用了 overflowey:lhidden 属性,这样就能闷建出表格底部和顶部的内容截断。特别是,也可以截断下拉菜单和其他第三方组件。
Firefox和 fieldset 元素
Firefox 浏览器对 fieldset 元素设置了一些影响width属性的样式,导致响应式表格出现问题。除非使用我们下面提供的针对 Firefox 的 hack 代码,否则无解
@-moz-document url-prefix() {
fieldset { display: table-cell;}
更多信息请参考 this Stack Overflow answer