Bootstrap 表格

Bootstrap 基础表格

Bootstrap 通过 .table 类来设置基础表格的样式,实例如下:

实例

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
亲自试一试 »

条纹表格

通过 .table-striped 类来设置条纹表格的样式,实例如下:

实例

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
亲自试一试 »

带边框表格

通过 .table-bordered 类可以为表格添加边框:

实例

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
亲自试一试 »


鼠标悬停状态表格

.table-hover 类可以为表格的每一行添加鼠标悬停效果(灰色背景):

实例

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
亲自试一试 »

压缩表

.table-condensed 类通过将单元格填充减半使表格更加紧凑:

实例

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
亲自试一试 »

上下文类

上下文类可用于给表格行 (<tr>) 或表格单元格 (<td>) 设置色:

实例

Firstname Lastname Email
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 宽的大型设备上查看时,您将看不到任何的差别:

实例

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
亲自试一试 »

学习训练

练习题:

添加一个class 属性,将表格样式设置为基本 Bootstrap 表格。

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@example.com</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@example.com</td>
  </tr>
<table>

开始练习


完整 Bootstrap 表格参考

有关表格的完整参考,请访问我们 Bootstrap 表格参考