Bootstrap中怎么使用表格？强大表格的用法浅析

1. Bootstrap中的表格

Bootstrap是一个流行的前端框架，它提供了很多常用的UI组件，其中包括表格。在Bootstrap中，可以使用表格轻松地展示数据，而且可以通过一系列的样式和类名来使表格看起来更美观。

1.1 基本表格

使用Bootstrap创建基本表格非常简单，只需要在<table>标签上添加class="table"即可：

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

上述代码将创建一个基本的表格，其中包括表头和表身，每个单元格都使用默认样式。

1.2 带边框的表格

如果你想给表格添加边框，只需要添加class="table table-bordered"即可：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

上述代码将创建一个带边框的表格。

1.3 面板式表格

如果你想要创建一个更复杂的表格，包括面板式样式、条纹式样式和响应式样式，可以使用class="table table-striped table-hover table-responsive"：

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

上述代码将创建一个面板式表格，具有响应式设计。此外，还为每个单元格添加了悬停效果和条纹式背景。

2. 表格样式

Bootstrap还提供了很多用于自定义表格的CSS类和样式。

2.1 表格颜色

可以使用以下类名来设置表格的颜色：

class="table-primary" ：用于设置主要表格颜色。

class="table-secondary" ：用于设置次要表格颜色。

class="table-success" ：用于设置成功表格颜色。

class="table-danger" ：用于设置危险表格颜色。

class="table-warning" ：用于设置警告表格颜色。

class="table-info" ：用于设置信息表格颜色。

class="table-light" ：用于设置浅色表格颜色。

class="table-dark" ：用于设置深色表格颜色。

以下是一个示例table-success表格：

<table class="table table-success">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

2.2 表格尺寸

可以使用以下类名来设置表格的大小：

class="table-sm" ：用于设置小表格。

class="table-lg" ：用于设置大表格。

以下是一个示例table-sm表格：

<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

3. 小结

通过本文，我们学习了如何在Bootstrap中使用表格。我们了解了如何创建基本表格、带边框的表格和面板式表格。此外，我们还了解了如何使用表格颜色和表格大小设置来自定义表格。