Bootstrap 学习之表格

表格

+ 示例
+ Head 表头处理
+ 条纹状表格
+ 表格边框处理
+ 行悬停效果
+ 紧缩效果
+ 语义状态化

示例

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>

.table 类实现了表格的基本样式。

可以使用 .table-dark 类来实现颜色反转对比效果。

Head 表头处理

<table class="table">
    <thead class="thead-dark | thead-light"></thead>
</table>

可以使用 .thead-light 或 .thead-dark 来使 <thead> 的颜色。

条纹状表格

<table class="table table-striped"></table>

可以使用 .table-striped 来定义条纹状表格。

表格边框处理

<table class="table table-bordered"></table>

可以使用 .table-bordered 来定义表格的边框。.table-borderless 可以实现无边框效果。

行悬停效果

<table class="table table-hover"></table>

可以使用 .table-hover 来产生悬停效果（ 鼠标移到行上会出现状态提示 ）。如上图的第三行。

紧缩效果

<table class="table table-sm"></table>

使用 .table-sm 将表格的 padding 缩小一半。使表格更紧凑。

语义状态化

<table class="table">
  <thead>
    <tr>
      <th>Type</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-active">
      <td colspan="4">active</td>
    </tr>
    <tr class="table-primary">
      <td colspan="4">primary</td>
    </tr>
    <tr class="table-secondary">
      <td colspan="4">secondary</td>
    </tr>
    <tr class="bg-success">
      <td colspan="4">success</td>
    </tr>
    <tr class="bg-danger">
      <td colspan="4">danger</td>
    </tr>
    <tr class="bg-warning">
      <td colspan="4">warning</td>
    </tr>
    <tr class="bg-info">
      <td colspan="4">info</td>
    </tr>
    <tr class="bg-light">
      <td colspan="4">light</td>
    </tr>
    <tr class="bg-dark">
      <td colspan="4" class="text-light">dark</td>
    </tr>
  </tbody>
</table>