11-Bootstrap 全局 CSS 样式-表格2|学习笔记

简介: 快速学习11-Bootstrap 全局 CSS 样式-表格2

开发者学堂课程【前端开发框架 Bootstrap 使用教程11-Bootstrap 全局 CSS 样式-表格2】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/360/detail/4230


11-Bootstrap 全局 CSS 样式-表格2


目录

一、状态类

二、响应式


一、状态类

通过这些状态类可以为行为或单元格设置颜色

Class

描述

.active

鼠标易停在行或单元格上时所设置的颜色

.success

标识成功或犯报的动作

 

 

.info

标识普通的提示信息或动

.warning

标识警告或需要用户注意

.danger

标识危险或潜在的带来负面影响的动作


image.png

向使用辅助技术的用户传达用意

通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现,并不能为使用辅助技术--例如屏幕阅读器--浏览网页的用户提供更多信息。因此,请确保通过颜色而赋予的不同意义可以通过内容本身来表达(即在相应行或单元格中的可见的文本内容);或者通过包含额外的方式 -- 例如应用了.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

相关文章
N..
|
25天前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
13 0
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
30 0
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
27 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
41 0
|
8天前
|
前端开发
|
11天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
15天前
|
XML 前端开发 数据格式
css添加样式
【4月更文挑战第4天】css添加样式
20 9
|
1月前
|
JavaScript 前端开发
如何在 Vue 中进行样式绑定和scoped CSS?
如何在 Vue 中进行样式绑定和scoped CSS?
15 0
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
22 0