Bootstrap4 表格
Bootstrap 4 基本表
基本的 Bootstrap 4 表格具有轻质填充和水平分隔线。
这个.table类向表添加基本样式：
示例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
条纹行
这个.table-striped类将斑马条纹添加到表中：
示例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
有边框的表格
这个.table-bordered类在表格和单元格的所有侧面添加边框：
示例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
悬停行
这个.table-hover类在表格行上添加悬停效果（灰色背景色）：
示例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
黑色/深色表格
这个.table-dark类向表格添加黑色背景：
示例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
深色条纹桌
结合.table-dark和.table-striped创建一个深色条纹表格：
示例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
可悬停的深色表格
这个.table-hover类在表格行上添加悬停效果（灰色背景色）：
示例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
无边框表格
这个.table-borderless类从表中删除边框：
示例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
情境类
上下文类可用于为整个表着色（<table>），表行（<tr>) 或表格单元格 (<td>）。
示例
| Firstname | Lastname | |
|---|---|---|
| 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 |
深灰色表格或表格行背景 |
桌头颜色
这个.thead-dark类向表标题添加黑色背景，并且.thead-light类向表标题添加灰色背景：
示例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
小表格
这个.table-smclass 通过将单元格填充减半来使表格变小：
示例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
响应表
这个.table-responsive类在需要时向表格添加滚动条（当水平方向太大时）：
您还可以根据屏幕宽度决定表格何时应获得滚动条：
| 类 | 屏幕宽度 |
|---|---|
.table-responsive-sm |
< 576 像素 |
.table-responsive-md |
< 768 像素 |
.table-responsive-lg |
< 992 像素 |
.table-responsive-xl |
< 1200 像素 |