码农教程 - 一技在手,衣食无忧! tools

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-condensedclass 通过将单元格填充减半来使表格更加紧凑：

示例

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类创建一个响应表。然后，表格将在小型设备（768 像素以下）上水平滚动。在宽度大于 768px 的任何物体上查看时，没有区别：

示例

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

通过练习测试一下

练习:

添加类属性以将表设置为基本 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 表参考。


❮ 上一节 下一节 ❯