Bootstrap5 表格

Bootstrap 是一个流行的前端框架，它提供了丰富的组件和工具，以帮助开发者快速构建响应式、交互式的网页。Bootstrap5 是 Bootstrap 的最新版本，它带来了许多新的特性和改进。本文将详细介绍 Bootstrap5 中的表格组件，包括其基本用法、样式定制以及一些高级应用。

1. 基本用法

Bootstrap5 的表格组件非常简单易用。以下是一个基本的表格示例：

html 复制代码

<table class="table">
  <thead>
    <tr>
      <th scope="col">编号</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
      <td>程序员</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
      <td>产品经理</td>
    </tr>
  </tbody>
</table>

在上面的示例中，我们使用 <table> 标签创建了一个表格，并为其添加了 .table 类。这样，表格就会自动应用 Bootstrap5 的默认样式。<thead> 和 <tbody> 标签分别用于定义表头和表体，而 <tr> 标签用于定义表格行，<th> 和 <td> 标签则分别用于定义表头单元格和表体单元格。

2. 样式定制

Bootstrap5 提供了多种表格样式，以满足不同场景的需求。以下是一些常用的表格样式：

.table: 默认样式，带有边框、背景色和文本颜色。
.table-bordered: 带有边框的表格，适用于需要强调表格边框的场景。
.table-striped: 带有条纹的表格，用于区分奇偶行。
.table-hover: 鼠标悬停时显示高亮效果的表格。
.table-active: 激活状态的表格行，通常用于单选或复选框。

以下是一个应用了多种样式的表格示例：

html 复制代码

<table class="table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th scope="col">编号</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">职业</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-active">
      <td>1</td>
      <td>张三</td>
      <td>25</td>
      <td>程序员</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
      <td>产品经理</td>
    </tr>
  </tbody>
</table>

3. 高级应用

Bootstrap5 的表格组件还支持一些高级应用，例如：

可折叠表格：使用 <button> 或 <a> 标签触发表格行的展开和折叠。
筛选和排序：使用 JavaScript 或 jQuery 实现表格的筛选和排序功能。
分页：使用分页插件实现表格数据的分页显示。

以下是一个可折叠表格的示例：

html 复制代码

<table class="table">
  <thead>
    <tr>
      <th scope="col">编号</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">职业</th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
      <td>程序员</td>
      <td>
        <button class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#collapse1">展开</button>
      </td>
    </tr>
    <tr class="collapse" id="collapse1">
      <td colspan="5">
        <p>张三的详细信息...</p>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
      <td>
        <button class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#collapse2">展开</button>
      </td>
    </tr>
    <tr class="collapse" id="collapse2">
      <td colspan="5">
        <p>李四的详细信息...</p>
      </td>
    </tr>
  </tbody>
</table>

在上述示例中，我们使用 <button> 标签创建了一个可折叠的表格行。当点击按钮时，对应的表格行会展开或折叠。

4. 总结

Bootstrap5 的表格组件功能强大，易于使用。通过合理运用表格样式和高级应用，可以构建出美观、实用的表格。希望本文能帮助您更好地了解 Bootstrap5 的表格组件。