Bootstrap 5表格

Bootstrap是一个流行的HTML、CSS和JavaScript框架，提供了许多有用的组件和工具，可以帮助开发人员快速构建样式和交互式Web界面。其中一个最普遍的组件之一就是表格。

Bootstrap 5表格是一个强大的组件，可以帮助开发人员创建具有各种功能和样式的表格。它可以轻松地添加响应式布局、排序、筛选、分页等。

创建基本的表格

要在Bootstrap 5中创建一个基本的表格，请使用下面的HTML代码：

<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>

上述代码将生成一个基本的表格，其中包含一个标题行和三个数据行。表格上方还有一个可选的标题行，可用于显示表格的标题或其他相关信息。

在这个表格中，我们使用了Bootstrap 5的“表格”类。这个类可以帮助我们将表格的边框和其他样式应用到我们创建的表格中。

添加样式

Bootstrap 5表格还支持多种样式，可以通过简单的CSS代码来实现。下面是一些常见的表格样式示例：

基本样式

<table class="table">
  <!-- table rows and headers go here -->
</table>

带有斑马纹的样式

<table class="table table-striped">
  <!-- table rows and headers go here -->
</table>

带有边框的样式

<table class="table table-bordered">
  <!-- table rows and headers go here -->
</table>

鼠标悬停样式

<table class="table table-hover">
  <!-- table rows and headers go here -->
</table>

高级功能

Bootstrap 5表格还支持许多高级功能，包括分页、排序、筛选等。这些功能可以通过添加一些额外的JavaScript代码来实现。

以下是一些示例：

带有分页的表格

<table class="table">
  <!-- table rows and headers go here -->
</table>

<!-- pagination links go here -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

带有排序的表格

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

<script>
  $(document).ready(function() {
    $('table').DataTable();
  });
</script>

带有筛选的表格

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

<script>
  $(document).ready(function() {
    $('table').DataTable({
      "searching": true
    });
  });
</script>

结束语

Bootstrap 5表格是一个强大的组件，可以帮助开发人员快速创建各种类型的表格。除了基本的表格，它还支持许多高级功能，如分页、排序、筛选等。无论您是初学者还是经验丰富的开发人员，都可以使用Bootstrap 5表格轻松地构建令人印象深刻的Web界面。