异常教程

Bootstrap4 表格（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 Web 开发领域，Bootstrap 是一个广受欢迎的前端框架，它通过提供丰富的组件和样式，简化了网页设计的复杂性。而 Bootstrap4 表格作为其核心组件之一，能够快速构建出结构清晰、响应灵活的数据展示界面。无论是展示用户列表、订单信息，还是商品数据，掌握 Bootstrap4 表格的使用方法，都能大幅提升开发效率。本文将从基础到进阶，结合实例详细讲解如何利用 Bootstrap4 表格实现高效、美观的网页布局。

一、表格基础：快速构建标准结构

1.1 表格的基本 HTML 结构

在使用 Bootstrap4 表格之前，需先了解 HTML 表格的基础语法。一个标准的表格由 <table> 标签包裹，包含表头 <thead>、表体 <tbody>，以及行 <tr>、列 <td> 或表头列 <th>。例如：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>

1.2 添加 Bootstrap4 的基础样式

Bootstrap4 通过 CSS 类为表格提供默认样式。只需给 <table> 添加 .table 类，即可获得简洁的默认样式，包括边框、内边距和阴影效果：

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

效果比喻：
想象表格是一张白纸，.table 类就像为它添加了一圈优雅的边框和内衬，让数据看起来更整洁。

二、响应式设计：让表格适应不同设备

2.1 响应式表格的核心：.table-responsive

在移动端设备上，表格可能因列数过多而显示不全。Bootstrap4 提供了 .table-responsive 类，通过包裹表格并添加水平滚动条，确保内容在小屏幕上依然可读：

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

关键点：

  • 此类需包裹整个 <table> 标签。
  • 默认在 xs（小于 576px）断点下触发滚动，也可通过添加类如 .table-responsive-sm 指定其他断点。

2.2 实战案例：适配多列表格

假设有一个包含 6 列的订单表格，使用 .table-responsive 后，用户在手机上可水平滑动查看全部信息：

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>订单号</th>
        <th>客户</th>
        <th>金额</th>
        <th>状态</th>
        <th>下单时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 数据行 -->
    </tbody>
  </table>
</div>

三、自定义样式：让表格更具视觉表现力

3.1 基础样式类：条纹、悬停、边框

Bootstrap4 提供了多个类，可快速为表格添加视觉效果：

  • 条纹效果：.table-striped 为奇数行添加背景色，方便阅读长列表：

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

  • 悬停效果：.table-hover 让鼠标悬停时的行显示高亮色：

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

  • 全边框：.table-bordered 为表格和单元格添加边框，适合需要明确分隔数据的场景：

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

比喻：
这些样式类如同给表格穿上不同的“外衣”——条纹是格子衫，悬停是高光涂层，边框则是金属边框，根据需求自由搭配。

3.2 自定义颜色：高亮关键数据

通过结合 Bootstrap4 的颜色类（如 .table-success、.table-danger），可为特定行或列添加颜色标记：

<table class="table">
  <tbody>
    <tr class="table-success">
      <td>已完成</td>
      <td>...</td>
    </tr>
    <tr class="table-danger">
      <td>异常</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

应用场景：
在订单表格中，用绿色高亮“已发货”行，用红色标记“未付款”行，帮助用户快速定位关键信息。

四、高级功能：排序与分页

4.1 实现基础排序功能

虽然 Bootstrap4 本身不提供排序组件，但可通过 JavaScript 结合 CSS 类实现简单排序。例如，为表头添加点击事件，动态切换排序方向：

<table class="table">
  <thead>
    <tr>
      <th><a href="#" class="sort-link" data-sort="asc">价格</a></th>
      <!-- 其他列 -->
    </tr>
  </thead>
</table>

<script>
document.querySelector('.sort-link').addEventListener('click', function(e) {
  e.preventDefault();
  const direction = this.getAttribute('data-sort') === 'asc' ? 'desc' : 'asc';
  this.setAttribute('data-sort', direction);
  // 这里可添加排序逻辑（如调用后端 API 或本地排序）
});
</script>

扩展建议：
对于复杂排序需求，可集成第三方库如 TableSort 。

4.2 分页组件：优雅的数据分页

Bootstrap4 提供了分页组件 .pagination，可与表格结合实现分页效果。例如：

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

<!-- 分页 -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">下一页</a>
    </li>
  </ul>
</nav>

注意事项：

  • 通过 .disabled 和 .active 类控制按钮状态。
  • 分页逻辑需结合后端实现数据加载（如通过 AJAX 请求）。

五、实战案例：构建完整的用户管理表格

5.1 整合所有功能

以下是一个完整的用户管理表格示例，包含响应式布局、样式、排序和分页：

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th><a href="#" class="sort-link">用户名</a></th>
        <th>邮箱</th>
        <th>注册时间</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>alice@example.com</td>
        <td>alice@example.com</td>
        <td>2023-01-15</td>
        <td class="table-success">正常</td>
      </tr>
      <!-- 更多行 -->
    </tbody>
  </table>
</div>

<!-- 分页 -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <!-- 同前文分页代码 -->
  </ul>
</nav>

5.2 扩展性建议

  • 表单过滤：在表格上方添加搜索框，通过 JavaScript 过滤数据。
  • 工具栏：添加导出 Excel 或 PDF 的按钮。
  • 动态数据：使用 AJAX 实现无限滚动加载。

六、结论

通过本文的讲解，您已掌握了 Bootstrap4 表格 的核心功能与使用场景。从基础结构到响应式设计，再到自定义样式和高级交互，Bootstrap4 提供了灵活且高效的解决方案。对于开发者而言，善用其提供的类和组件，不仅能减少重复代码的编写，还能确保界面的一致性和可维护性。

在实际项目中，建议结合具体需求选择功能组合。例如，数据量大的列表需搭配分页和排序，而需要强调关键数据的场景则可利用颜色高亮。未来，随着 Bootstrap 版本的更新，表格功能可能进一步扩展，但其核心思想——通过标准化组件提升开发效率——将始终是前端开发的基石。

现在，不妨动手尝试将这些技巧应用到你的项目中，让数据展示变得既优雅又高效！

最新发布

查看更多文章