Bootstrap 4 表格
Bootstrap 4 基本表格
一个基本的 Bootstrap 4 表格具有轻微的内边距和水平分隔线。
.table 类为表格添加基本样式
示例
| 名 | 姓 | 邮箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
斑马条纹行
.table-striped 类为表格添加斑马条纹
示例
| 名 | 姓 | 邮箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
带边框的表格
.table-bordered 类为表格和单元格的所有边添加边框
示例
| 名 | 姓 | 邮箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
悬停行
.table-hover 类在表格行上添加悬停效果（灰色背景色）
示例
| 名 | 姓 | 邮箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
黑色/深色表格
.table-dark 类为表格添加黑色背景
示例
| 名 | 姓 | 邮箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
深色斑马条纹表格
结合使用 .table-dark 和 .table-striped 创建一个深色、斑马条纹的表格
示例
| 名 | 姓 | 邮箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
可悬停的深色表格
.table-hover 类在表格行上添加悬停效果（灰色背景色）
示例
| 名 | 姓 | 邮箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
无边框表格
.table-borderless 类移除表格的边框
示例
| 名 | 姓 | 邮箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Contextual Classes
可以使用上下文类来为整个表格（<table>）、表格行（<tr>）或表格单元格（<td>）着色。
示例
| 名 | 姓 | 邮箱 |
|---|---|---|
| 默认值 | 默认 | def@somemail.com |
| 主色 | 乔 | joe@example.com |
| 成功 | Doe | john@example.com |
| 危险 | Moe | mary@example.com |
| 信息 | Dooley | july@example.com |
| 警告 | Refs | bo@example.com |
| 激活 | Activeson | act@example.com |
| 次色 | 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 |
深灰色表格或表格行背景 |
表头颜色
.thead-dark 类为表头添加黑色背景，.thead-light 类为表头添加灰色背景
示例
| 名 | 姓 | 邮箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
| 名 | 姓 | 邮箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
小型表格
.table-sm 类通过将单元格内边距减半来使表格更小
示例
| 名 | 姓 | 邮箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
响应式表格
.table-responsive 类在表格水平过大时添加滚动条
您还可以决定何时添加滚动条，这取决于屏幕宽度
| 类 | 屏幕宽度 |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
