Bootstrap 4 表格

Bootstrap 4 表格

引言

Bootstrap 4 是一个流行的前端框架，它提供了丰富的组件和工具，用于快速开发响应式和移动优先的网页。在本文中，我们将重点讨论 Bootstrap 4 中的表格组件，包括其基本用法、样式定制以及响应式特性。

基本表格

在 Bootstrap 4 中，创建基本表格非常简单。您只需要添加 table 类到 <table> 元素即可。这会应用基本的表格样式，包括水平分隔线和单元格填充。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</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>

表格样式

Bootstrap 4 提供了多种表格样式，以满足不同的设计需求。

斑马纹表格

通过添加 .table-striped 类，您可以创建一个带有斑马纹效果的表格，其中偶数行会有不同的背景色。

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

带边框的表格

.table-bordered 类会给表格和单元格添加边框。

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

鼠标悬停效果

使用 .table-hover 类，当鼠标悬停在表格行上时，行会呈现出不同的样式。

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

紧凑型表格

.table-sm 类可以减小单元格的内边距，使表格更加紧凑。

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

响应式表格

Bootstrap 4 中的表格默认是水平的，但您可以通过添加 .table-responsive 类来创建响应式表格，它在小型设备上会显示水平滚动条。

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

定制表格

Bootstrap 4 的表格可以通过一些自定义类进行样式修改。例如，您可以使用 .table-dark 类来创建深色背景的表格，或者使用 .table-light 类来创建浅色背景的表格。

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

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

您还可以自定义表格的背景色和文字颜色，通过直接在 <tr> 或 <td> 元素上应用颜色类来实现。

<tr class="table-primary">
  ...
</tr>

<tr class="table-success">
  ...
</tr>

结论

Bootstrap 4 的表格组件功能丰富，易于使用，并且可以通过多种方式定制。通过本文的介绍，您应该能够熟练地使用 Bootstrap 4 创建和定制表格，以满足您的网页设计需求。