异常教程

Bootstrap5 表格（长文讲解）

更新时间:

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

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

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

在网页开发中，表格是数据展示的核心工具之一。无论是电商商品列表、用户管理界面，还是数据分析看板，表格都能以清晰的结构化形式传递信息。而 Bootstrap5 表格 凭借其简洁的语法、优雅的样式和强大的响应式特性，成为开发者构建高质量表格的首选方案。本文将从基础到进阶，系统讲解如何利用 Bootstrap5 的表格组件实现高效开发，并通过实际案例展示其灵活性与扩展性。

一、Bootstrap5 表格的基础用法

1.1 表格的 HTML 结构

Bootstrap5 的表格基于标准的 HTML 表格元素（<table>），通过添加特定类名实现样式增强。其核心结构分为三个部分：

  • 表头（thead）：用于定义表格的标题行。
  • 表体（tbody）：存放实际数据内容。
  • 表行（tr） 和 表单元格（td/th）：分别表示行与列的单元格。

示例代码：基础表格

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">商品名称</th>
      <th scope="col">价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>苹果</td>
      <td>¥5.99</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>香蕉</td>
      <td>¥3.49</td>
    </tr>
  </tbody>
</table>

小贴士：scope="col" 和 scope="row" 是 ARIA 属性，用于提升屏幕阅读器的可访问性。

1.2 核心样式类

Bootstrap5 提供了多个预设的表格样式类，可直接通过类名叠加使用：

  • .table：基础样式（必选）。
  • .table-striped：为奇数行添加条纹背景，类似 Excel 的隔行变色效果。
  • .table-bordered：为表格和单元格添加边框，适合需要明确分隔的场景。
  • .table-hover：鼠标悬停时高亮当前行，增强交互感。

示例：组合使用样式类

<table class="table table-striped table-bordered table-hover">
  <!-- 表格内容与基础结构相同 -->
</table>

二、响应式设计与布局优化

2.1 自适应表格的实现

移动设备的普及要求表格必须适配不同屏幕尺寸。Bootstrap5 通过 .table-responsive 类包裹表格，自动为小屏幕添加水平滚动条，避免内容被压缩或换行。

示例：响应式表格

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

比喻：想象一个装满水果的盒子（表格），当盒子过宽时，.table-responsive 会像拉链一样横向封口，让用户通过滑动查看全部内容。

2.2 响应式断点控制

若需针对不同设备调整表格行为，可结合 Bootstrap 的响应式工具类。例如，仅在小屏幕隐藏某些列：

<table class="table">
  <thead>
    <tr>
      <th>商品名称</th>
      <th class="d-none d-md-table-cell">价格</th> <!-- 中等及以上屏幕显示 -->
    </tr>
  </thead>
</table>

这里通过 .d-none（隐藏）和 .d-md-table-cell（中等屏幕及以上显示）控制列的可见性，实现“按需展示”。

三、进阶功能：排序、过滤与交互

3.1 表格的排序功能

通过 JavaScript 插件（如 Bootstrap Table ）可快速实现动态排序。以下是一个简化示例：

示例：点击表头排序

<table id="sortable-table" class="table">
  <thead>
    <tr>
      <th data-sortable="true">价格</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据行 -->
  </tbody>
</table>

<script>
  // 初始化排序功能（需引入相关插件）
  $('#sortable-table').bootstrapTable();
</script>

提示：实际开发中需引入插件脚本，并根据需求配置排序逻辑。

3.2 动态过滤与搜索

结合 JavaScript 可实现表格数据的实时过滤。以下代码演示了如何通过输入框筛选“商品名称”列：

<input type="text" id="search-input" placeholder="搜索商品...">
<table class="table">
  <!-- 表格数据 -->
</table>

<script>
  document.getElementById('search-input').addEventListener('input', function() {
    const filter = this.value.toLowerCase();
    const rows = document.querySelectorAll('#search-table tr');
    rows.forEach(row => {
      const name = row.cells[1].textContent.toLowerCase();
      row.style.display = name.includes(filter) ? '' : 'none';
    });
  });
</script>

四、自定义与扩展：突破默认样式

4.1 修改表格配色

通过覆盖 Bootstrap 的默认 CSS 变量，可快速调整表格颜色。例如，将条纹色改为绿色：

.table-striped tbody tr:nth-of-type(odd) {
  --bs-table-accent-bg: #e8f5e9; /* 浅绿色 */
}

4.2 自定义列宽与对齐

Bootstrap 允许通过内联样式或自定义类控制列宽和文本对齐方式：

<table class="table">
  <thead>
    <tr>
      <th style="width: 20%;">ID</th>
      <th class="text-center">名称</th> <!-- 居中对齐 -->
    </tr>
  </thead>
</table>

最佳实践：优先使用 CSS 类（如 .text-end）而非内联样式，以保持代码的可维护性。

五、性能优化与常见问题

5.1 处理大数据量表格

当表格数据量较大时，直接渲染会导致性能问题。解决方案包括：

  1. 分页：使用 data-pagination="true" 等插件功能分页展示。
  2. 虚拟滚动：通过库（如 react-virtualized）仅渲染可视区域内容。

5.2 移动端优化

  • 避免过长的列标题，使用缩写或图标替代。
  • 对关键操作按钮（如“编辑”“删除”）添加 .d-block，使其在移动端垂直排列。

六、实战案例：构建电商商品列表

6.1 需求分析

假设需开发一个包含商品名称、价格、库存和操作按钮的表格，并要求：

  • 条纹样式与悬停效果。
  • 移动端隐藏库存列。
  • 支持按价格排序。

6.2 完整代码实现

<!-- HTML结构 -->
<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th>商品名称</th>
        <th class="d-none d-md-table-cell">库存</th>
        <th data-sortable="true">价格</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>智能手表</td>
        <td class="d-none d-md-table-cell">150</td>
        <td>¥899</td>
        <td><button class="btn btn-sm btn-primary">编辑</button></td>
      </tr>
      <!-- 更多数据行 -->
    </tbody>
  </table>
</div>

<!-- JavaScript初始化排序 -->
<script src="bootstrap-table.min.js"></script>
<script>
  $(document).ready(function () {
    $('#my-table').bootstrapTable({
      sortName: '价格',
      sortOrder: 'desc'
    });
  });
</script>

结论

通过本文的讲解，读者应能掌握 Bootstrap5 表格 从基础到进阶的使用方法，并通过实际案例理解其在不同场景下的应用价值。无论是快速搭建简单表格，还是开发复杂交互功能，Bootstrap5 的灵活设计与丰富的组件库都能显著提升开发效率。

下一步行动：尝试将本文的代码示例复制到本地环境，通过修改类名或添加样式，探索更多自定义可能性。若需深入学习，可参考官方文档或 Bootstrap 社区的插件资源。

（全文约 1800 字）

最新发布

查看更多文章