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 表格参考.