鼠标悬停效果 – 黑色背景表格
联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果:
实例
Firstname Lastname Email John Doe john@example.com Mary Moe mary@example.com July Dooley july@example.com
指定意义的颜色类
通过指定意义的颜色类可以为表格的行或者单元格设置颜色:
实例
Firstname Lastname Email Default Defaultson def@somemail.com Primary Joe joe@example.com Success Doe john@example.com Danger Moe mary@example.com Info Dooley july@example.com Warning Refs bo@example.com Active Activeson act@example.com Secondary Secondson sec@example.com Light Angie angie@example.com Dark Bo bo@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 类用于给表头添加灰色背景。
实例










