Bootstrap 表格
Bootstrap 基础表格
一个基础的 Bootstrap 表格有一点轻微的 padding（填充）和水平分割。
.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-condensed 类通过将单元格填充减半使表格更加紧凑:
实例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
上下文类
上下文类可用于给表格行（<tr>）或表格单元格（<td>）添加颜色:
实例
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | def@somemail.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 |
可以使用的上下文类包括:
| 类 | 描述 |
|---|---|
| .active | 将悬停颜色应用于表格行或表格单元格 |
| .success | 表示成功或正向的操作 |
| .info | 表示中性的信息性更改或操作 |
| .warning | 表示可能需要注意的警告 |
| .danger | 表示危险或潜在的负面操作 |
自适应表格
.table-responsive 样式类创建一个响应式的表格。然后，表格将在小型设备上水平滚动（768px 以下）。当在任何大于 768px 宽的设备上观察时，没有区别:
实例
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>表格</h2><p>.table-responsive 样式类创建一个响应式的表格。然后，表格将在小型设备上水平滚动（**768px** 以下）。当在任何大于 **768px** 宽的设备上观察时，没有区别:</p><div class="table-responsive"><table class="table"><thead><tr><th>#</th><th>Firstname</th><th>Lastname</th><th>Age</th><th>City</th><th>Country</th></tr></thead><tbody><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr></tbody></table></div></div></body></html>
完整的 Bootstrap 表格参考引用
有关所有表格类的完整参考，请访问本站的完整 Bootstrap 表格参考.