Bootstrap5 表格学习笔记

Bootstrap 是一个流行的前端框架，可以帮助开发者快速地构建响应式的网页。其中表格是网页常用的数据展示方式之一，Bootstrap 也提供了丰富的表格组件和样式，下面就来学习一下吧。

表格基础

使用 Bootstrap 的表格很简单，只需在 HTML 文件中添加 table 标签，并为其添加对应的类即可。下面是一个最基本的表格示例：

htmlCopy Code
<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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

在这个示例中，我们添加了 table 和 table-striped 类，它们分别表示表格和斑马纹样式。表头使用 thead 标签，表单部分使用 tbody 标签，并使用 tr 和 td 标签定义行和单元格。

表格样式

Bootstrap 提供了多种表格样式，通过添加不同的类来实现。下面是一些常用的表格样式：

• table-striped：斑马纹样式。
• table-bordered：带有边框样式。
• table-hover：鼠标悬停样式。
• table-dark：深色背景样式。
• table-responsive：响应式表格样式。

示例代码如下：

htmlCopy Code
<table class="table table-striped table-bordered table-hover">
  <!-- 表格内容 -->
</table>

<table class="table table-dark">
  <!-- 表格内容 -->
</table>

<div class="table-responsive">
  <table class="table">
    <!-- 表格内容 -->
  </table>
</div>

表格大小

Bootstrap 还提供了多种表格大小，可以通过添加不同的类来实现。

• table-sm：小号表格样式。
• table-lg：大号表格样式。

示例代码如下：

htmlCopy Code
<table class="table table-sm">
  <!-- 表格内容 -->
</table>

<table class="table table-lg">
  <!-- 表格内容 -->
</table>

实例演示

下面是一个完整的 Bootstrap 表格示例，包括使用了表格样式和大小，并添加了一些数据和图标。

htmlCopy Code
<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover table-sm">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>邮箱</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td>
        <td>18</td>
        <td>xiaoming@123.com</td>
        <td>
          <button type="button" class="btn btn-secondary btn-sm">
            <i class="bi bi-pencil"></i>
          </button>
          <button type="button" class="btn btn-danger btn-sm">
            <i class="bi bi-trash"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>小红</td>
        <td>20</td>
        <td>xiaohong@123.com</td>
        <td>
          <button type="button" class="btn btn-secondary btn-sm">
            <i class="bi bi-pencil"></i>
          </button>
          <button type="button" class="btn btn-danger btn-sm">
            <i class="bi bi-trash"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>小刚</td>
        <td>19</td>
        <td>xiaogang@123.com</td>
        <td>
          <button type="button" class="btn btn-secondary btn-sm">
            <i class="bi bi-pencil"></i>
          </button>
          <button type="button" class="btn btn-danger btn-sm">
            <i class="bi bi-trash"></i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

以上就是 Bootstrap5 表格的学习笔记，希望对大家有所帮助！