Bootstrap官方文档中有详尽的表格组件教程和示例

Bootstrap 是一个流行的前端框架，它提供了丰富的组件和工具，使得开发响应式网页变得更加简单。表格组件是 Bootstrap 中非常实用的一部分，它可以帮助我们创建美观、易读的表格。以下是对 Bootstrap 官方文档中表格组件教程和示例的详细解析。

1. 基础表格

Bootstrap 的基础表格使用 <table> 标签创建，并通过类 .table 来添加样式。下面是一个简单的示例：

<table class="table">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

2. 精细表格

为了使表格更加美观，Bootstrap 提供了 .table-bordered 类，它可以为表格和单元格添加边框。以下是一个示例：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

3. 阴影表格

Bootstrap 的 .table-hover 类可以为表格的行添加悬停效果，使得表格更加生动。以下是一个示例：

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

4. 精细表格样式

Bootstrap 提供了多种精细表格样式，例如 .table-striped、.table-condensed 和 .table-responsive。以下是一个示例：

<table class="table table-bordered table-hover table-striped table-condensed table-responsive">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

5. 表格组件扩展

Bootstrap 还提供了表格组件的扩展，例如 .table-active、.table-success、.table-warning、.table-danger 等，这些类可以为表格行添加不同的状态样式。以下是一个示例：

<table class="table table-bordered table-hover table-striped table-condensed table-responsive">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-active">
      <td>1</td>
      <td>张三</td>
      <td>25</td>
      <td>活跃</td>
    </tr>
    <tr class="table-success">
      <td>2</td>
      <td>李四</td>
      <td>30</td>
      <td>成功</td>
    </tr>
  </tbody>
</table>

通过以上示例，我们可以看到 Bootstrap 表格组件的强大功能。在实际开发中，我们可以根据需求组合使用这些类，创建出各种风格的表格。希望本文能帮助您更好地理解 Bootstrap 表格组件的使用方法。