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

相关文章
|
5天前
|
前端开发
|
5月前
|
前端开发
基于CSS3+Bootstrap实现的侧边栏后台菜单源码
CSS3+Bootstrap实现的侧边栏后台菜单特效源码是一段基于Bootstrap和图标库制作的侧边栏菜单后台管理页面效果代码,简洁大方、易于管理,是一段非常不错的后台菜单栏效果,欢迎对此段代码感兴趣的朋友前来下载。
148 54
|
4月前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
5月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
170 12
|
5月前
|
前端开发 JavaScript UED
|
5月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过<head>部分的<style>标签定义;外部样式表适用于多个页面,通过<link>标签引用外部CSS文件;<style>定义样式,<link>引用资源;已弃用的标签有<font>、<center>、<strike>,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
5月前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
5月前
|
NoSQL
Bootstrap5 表格12
使用 .table-responsive 类可以创建响应式表格。当屏幕宽度小于 992px 时,表格会出现水平滚动条;当屏幕宽度大于 992px 时,表格正常显示,没有滚动条。示例代码展示了如何实现这一效果。
Bootstrap5 表格11
使用 `.table-sm` 类可以创建一个内边距较小的紧凑型表格。