bootstrap的表格样式有哪些及怎么实现

发布时间：2022-04-12 13:49:32 作者：zzz
来源：亿速云阅读：524

Bootstrap的表格样式有哪些及怎么实现

Bootstrap 是一个流行的前端框架，提供了丰富的组件和样式，帮助开发者快速构建响应式网页。表格是网页中常见的元素之一，Bootstrap 提供了多种表格样式和功能，使得表格的设计和实现变得更加简单和灵活。本文将详细介绍 Bootstrap 中的表格样式及其实现方法。

1. 基本表格样式

Bootstrap 提供了基本的表格样式，只需为 <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>

1.1 表格边框

默认情况下，Bootstrap 的表格没有边框。如果需要添加边框，可以为表格添加 .table-bordered 类。

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

1.2 表格悬停效果

为表格添加 .table-hover 类，可以在鼠标悬停时改变行的背景颜色。

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

1.3 条纹表格

通过添加 .table-striped 类，可以为表格的奇数行和偶数行添加不同的背景颜色，形成条纹效果。

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

1.4 紧凑表格

如果需要减少表格的内边距，使表格更加紧凑，可以添加 .table-sm 类。

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

2. 表格颜色样式

Bootstrap 提供了多种颜色样式，可以为表格的行、列或单元格添加不同的背景颜色。

2.1 行颜色

通过为 <tr> 元素添加 .table-primary、.table-secondary、.table-success、.table-danger、.table-warning、.table-info、.table-light 或 .table-dark 类，可以为表格的行设置不同的背景颜色。

<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 class="table-primary">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr class="table-success">
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr class="table-danger">
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

2.2 单元格颜色

同样地，可以为 <td> 或 <th> 元素添加颜色类，为单个单元格设置背景颜色。

<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 class="table-warning">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td class="table-info">Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td class="table-dark">@twitter</td>
    </tr>
  </tbody>
</table>

3. 响应式表格

在移动设备上，表格可能会超出屏幕宽度，导致内容无法完整显示。Bootstrap 提供了响应式表格的功能，通过为表格添加 .table-responsive 类，可以使表格在水平方向上滚动。

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

还可以根据屏幕宽度设置不同的响应式表格：

.table-responsive-sm：在小屏幕（≥576px）上启用响应式表格。
.table-responsive-md：在中等屏幕（≥768px）上启用响应式表格。
.table-responsive-lg：在大屏幕（≥992px）上启用响应式表格。
.table-responsive-xl：在超大屏幕（≥1200px）上启用响应式表格。

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

4. 表格的排序和分页

Bootstrap 本身并不提供表格排序和分页的功能，但可以通过集成第三方插件（如 DataTables）来实现这些功能。

4.1 使用 DataTables 实现表格排序和分页

DataTables 是一个功能强大的 jQuery 插件，可以为 HTML 表格添加排序、分页、搜索等功能。

首先，引入 DataTables 的 CSS 和 JS 文件：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

然后，初始化 DataTables：

<table id="example" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <!-- 更多行 -->
  </tbody>
</table>

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

通过以上代码，表格将具备排序、分页和搜索功能。

5. 自定义表格样式

虽然 Bootstrap 提供了丰富的表格样式，但在实际项目中，可能需要根据设计需求自定义表格样式。可以通过覆盖 Bootstrap 的默认样式或添加自定义 CSS 来实现。

5.1 覆盖默认样式

例如，如果需要更改表格的背景颜色，可以在自定义 CSS 文件中覆盖 .table 类的样式：

.table {
  background-color: #f8f9fa;
}

5.2 添加自定义样式

可以为表格添加自定义类，并在 CSS 中定义样式：

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

.custom-table {
  border: 2px solid #007bff;
}

.custom-table th {
  background-color: #007bff;
  color: white;
}

6. 总结

Bootstrap 提供了丰富的表格样式和功能，使得表格的设计和实现变得更加简单和灵活。通过使用 Bootstrap 的表格类，可以轻松实现基本表格、带边框的表格、条纹表格、紧凑表格等样式。此外，Bootstrap 还支持响应式表格，确保表格在不同设备上都能良好显示。

对于更复杂的功能，如表格排序和分页，可以集成第三方插件（如 DataTables）来实现。最后，通过自定义 CSS，可以根据项目需求进一步定制表格样式。

掌握 Bootstrap 的表格样式和实现方法，将有助于开发者快速构建美观、功能丰富的网页表格。