Bootstrap4 表格详解

Bootstrap 是一个流行的前端框架，它可以帮助开发者快速构建响应式、移动优先的网页。Bootstrap4 是 Bootstrap 的最新版本，提供了许多实用的组件，其中表格组件（Table）是构建数据展示页面的重要组成部分。本文将详细讲解 Bootstrap4 表格的用法，包括基本结构、样式定制、响应式布局等。

基本结构

Bootstrap4 表格的基本结构如下：

html 复制代码

<table class="table">
  <thead>
    <tr>
      <th scope="col">表头1</th>
      <th scope="col">表头2</th>
      <th scope="col">表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

其中，<table> 标签代表表格，class="table" 为表格添加 Bootstrap4 的基本样式。<thead> 和 <tbody> 分别代表表头和表体，<tr> 代表表格行，<th> 代表表头单元格，<td> 代表表体单元格。

样式定制

Bootstrap4 提供了丰富的表格样式，以下是一些常用的样式：

条纹样式 ：通过添加 class="table-striped"，表格行将以不同的颜色显示，便于区分。

html 复制代码

<table class="table table-striped">
  ...
</table>

边框样式 ：通过添加 class="table-bordered"，表格将添加边框。

html 复制代码

<table class="table table-bordered">
  ...
</table>

紧凑样式 ：通过添加 class="table-sm"，表格将具有更紧凑的布局。

html 复制代码

<table class="table table-sm">
  ...
</table>

表单表格 ：通过添加 class="table-responsive"，表格将具有响应式布局，适应不同屏幕尺寸。

html 复制代码

<table class="table table-responsive">
  ...
</table>

响应式布局

Bootstrap4 表格支持响应式布局，当屏幕尺寸小于一定阈值时，表格将自动转换为水平滚动视图。以下是一些常用的响应式布局类：

水平滚动表格：当屏幕宽度小于 768px 时，表格将水平滚动。

html 复制代码

<table class="table table-bordered table-hover table-responsive table-condensed">
  ...
</table>

折叠表格：当屏幕宽度小于 480px 时，表格将折叠为单列显示。

html 复制代码

<table class="table table-bordered table-hover table-responsive">
  ...
</table>

表格组件

Bootstrap4 提供了多种表格组件，以下是一些常用的组件：

表格单选框 ：通过添加 class="table-checkbox"，表格将添加单选框。

html 复制代码

<table class="table table-bordered table-checkbox">
  ...
</table>

表格复选框 ：通过添加 class="table-checkbox"，表格将添加复选框。

html 复制代码

<table class="table table-bordered table-checkbox">
  ...
</table>

表格工具栏 ：通过添加 class="table-toolbar"，表格将添加工具栏。

html 复制代码

<table class="table table-bordered table-toolbar">
  ...
</table>

总结

Bootstrap4 表格是构建数据展示页面的重要组件，本文详细讲解了 Bootstrap4 表格的基本结构、样式定制、响应式布局和表格组件。掌握这些知识，可以帮助开发者快速构建美观、实用的数据展示页面。希望本文对您有所帮助！