Bootstrap4 表格

2020-06-19 08:31:02易采站长站整理
鼠标悬停效果 – 黑色背景表格

联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果:

实例

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com


指定意义的颜色类

通过指定意义的颜色类可以为表格的行或者单元格设置颜色:

实例

FirstnameLastnameEmail
DefaultDefaultsondef@somemail.com
PrimaryJoejoe@example.com
SuccessDoejohn@example.com
DangerMoemary@example.com
InfoDooleyjuly@example.com
WarningRefsbo@example.com
ActiveActivesonact@example.com
SecondarySecondsonsec@example.com
LightAngieangie@example.com
DarkBobo@example.com

下表列出了表格颜色类的说明:

类名描述
.table-primary蓝色: 指定这是一个重要的操作
.table-success绿色: 指定这是一个允许执行的操作
.table-danger红色: 指定这是可以危险的操作
.table-info浅蓝色: 表示内容已变更
.table-warning橘色: 表示需要注意的操作
.table-active灰色: 用于鼠标悬停效果
.table-secondary灰色: 表示内容不怎么重要
.table-light浅灰色,可以是表格行的背景
.table-dark深灰色,可以是表格行的背景


表头颜色

在 Bootstrap v4.0.0-beta.2 中.thead-dark 类用于给表头添加黑色背景, .thead-light 类用于给表头添加灰色背景:

在 Bootstrap v4.0.0-beta 这个版本中,.thead-inverse 类用于给表头添加黑色背景,.thead-default 类用于给表头添加灰色背景。

实例

相关文章 大家在看
FirstnameLastnameEmail