Bootstrap 表格
Bootstrap 基础表格
Bootstrap 通过 .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 宽的大型设备上查看时,您将看不到任何的差别:
完整 Bootstrap 表格参考
有关表格的完整参考,请访问我们 Bootstrap 表格参考。