Bootstrap4 表格（千字长文）

什么是 Bootstrap4 表格？为什么它值得你掌握

在网页开发中，数据展示是最常见的需求之一。无论是用户信息、订单记录，还是统计数据，表格都是最直观、最高效的呈现方式。而 Bootstrap4 表格，正是为这种场景量身打造的实用工具。

你可以把 Bootstrap4 表格想象成一个“现成的骨架”——它不负责内容，但提供了完整的结构、样式和交互支持。你只需要把数据放进去，它就能自动变得好看、响应式、可读性强。

相比手动写 CSS 来控制表格样式，使用 Bootstrap4 表格能节省至少 70% 的时间。更重要的是，它自带了对移动端的适配能力，无论用户在手机还是平板上查看，表格都不会“撑破屏幕”。

在接下来的内容里，我会带你一步步搭建一个完整的 Bootstrap4 表格项目，从基础结构到高级特性，手把手教你如何让数据“说话”。

基础结构：构建你的第一个 Bootstrap4 表格

要使用 Bootstrap4 表格，第一步是引入 Bootstrap 的 CSS 文件。这就像盖房子前先准备好地基和建材。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Bootstrap4 表格示例</title>
  <!-- 引入 Bootstrap4 的 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <!-- 表格开始 -->
    <table class="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>
        <tr>
          <td>王五</td>
          <td>25</td>
          <td>产品经理</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- 引入 Bootstrap4 的 JS 和依赖（可选） -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

📌 代码注释说明：

table 类是 Bootstrap4 表格的核心类，它会自动应用基础的边框、内边距和 hover 效果。
thead 是表头部分，通常包含列名。使用 <th> 标签表示表头单元格。
tbody 是表格主体，存放实际的数据行。
每一行用 <tr> 包裹，每列用 <td>（数据）或 <th>（表头）包裹。
所有外部结构都包裹在 container 中，确保页面居中且响应式。

运行这段代码，你将看到一个简洁、现代的表格。它已经具备了良好的可读性和基本的交互反馈。

响应式设计：让表格在手机上也能看清楚

你有没有遇到过这样的情况？在手机上打开一个网页，表格内容太宽，只能左右滑动才能看到全部？这不仅影响体验，还会让用户流失。

Bootstrap4 表格内置了响应式功能。当屏幕宽度小于 576px（移动端），表格会自动变成“堆叠”模式，每一行的数据会垂直排列，就像一张卡片。

<table class="table table-responsive">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
      <th>邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>赵六</td>
      <td>30</td>
      <td>北京</td>
      <td>zhaoliu@example.com</td>
    </tr>
    <tr>
      <td>孙七</td>
      <td>27</td>
      <td>上海</td>
      <td>sunqi@example.com</td>
    </tr>
  </tbody>
</table>

📌 关键点说明：

table-responsive 类是实现响应式的核心。它会包裹表格，添加水平滚动条（在小屏设备上）。
当屏幕变窄时，表格不会“变形”或“溢出”，而是优雅地滚动或堆叠。
这个特性特别适合展示包含多列的数据，比如用户资料、商品列表等。

💡 小贴士：如果你希望在移动端完全堆叠，可以使用 table-responsive-sm 或 table-responsive-md，它们分别在小屏或中屏触发堆叠。

表格样式美化：让数据更“好看”更“易读”

光有结构还不够，我们还需要让表格“有颜值”。Bootstrap4 提供了多种内置样式类，让你轻松打造专业级的视觉效果。

常用样式类一览

类名	效果说明
`table-striped`	行交替着色，提升可读性
`table-bordered`	添加边框，清晰分隔单元格
`table-hover`	鼠标悬停时行变色，提升交互感
`table-sm`	缩小表格尺寸，适合密集数据

<!-- 示例：结合多个样式 -->
<table class="table table-striped table-bordered table-hover table-sm">
  <thead class="thead-dark">
    <tr>
      <th>编号</th>
      <th>产品名称</th>
      <th>价格（元）</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>无线耳机</td>
      <td>299</td>
      <td>120</td>
    </tr>
    <tr>
      <td>002</td>
      <td>机械键盘</td>
      <td>599</td>
      <td>34</td>
    </tr>
    <tr>
      <td>003</td>
      <td>显示器</td>
      <td>1299</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

📌 重点解析：

table-striped：每行交替使用浅灰和白色背景，避免视觉疲劳。
table-bordered：给所有单元格添加边框，让结构更清晰。
table-hover：当鼠标悬停在某一行时，背景颜色变浅，用户能立刻感知到当前行。
table-sm：减小字体和内边距，适合展示大量数据。
thead-dark：将表头背景设为深色，突出标题区域。

这些样式可以自由组合，根据你的设计需求灵活调整。记住，美观不是“花哨”，而是“清晰”。

高级功能：动态交互与数据处理

Bootstrap4 表格本身不提供 JavaScript 逻辑，但它与 jQuery 完美兼容，可以轻松实现动态操作。

实现“点击行高亮”效果

<table class="table table-hover" id="dataTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>部门</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>陈八</td>
      <td>31</td>
      <td>技术部</td>
    </tr>
    <tr>
      <td>周九</td>
      <td>29</td>
      <td>市场部</td>
    </tr>
    <tr>
      <td>吴十</td>
      <td>35</td>
      <td>人事部</td>
    </tr>
  </tbody>
</table>

<script>
  // 监听表格行点击事件
  document.getElementById('dataTable').addEventListener('click', function(e) {
    // 获取被点击的行
    const row = e.target.closest('tr');
    
    // 移除所有行的高亮类
    document.querySelectorAll('#dataTable tr').forEach(tr => {
      tr.classList.remove('table-active');
    });
    
    // 给当前行添加高亮
    if (row) {
      row.classList.add('table-active');
    }
  });
</script>

📌 代码解析：

closest('tr') 是一个强大的 DOM 方法，用于向上查找最近的 <tr> 元素，避免误触 <td>。
table-active 是 Bootstrap 提供的内置类，用于高亮选中的行。
使用 forEach 遍历所有行，确保每次只有一行被选中。
这个功能在“员工管理”、“订单选择”等场景中非常实用。

✅ 实际建议：如果数据量大，可以考虑使用 event delegation（事件代理）提升性能。

实战案例：构建一个用户信息管理表格

现在我们来整合所有知识点，构建一个完整的用户信息管理界面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>用户信息管理 - Bootstrap4 表格</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
  <div class="container py-5">
    <h2 class="mb-4 text-center">用户信息管理</h2>

    <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover table-sm">
        <thead class="thead-dark">
          <tr>
            <th>用户ID</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>注册时间</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>U001</td>
            <td>刘一</td>
            <td>liuyi@example.com</td>
            <td>2023-05-10</td>
            <td><span class="badge badge-success">正常</span></td>
          </tr>
          <tr>
            <td>U002</td>
            <td>钱二</td>
            <td>qianer@example.com</td>
            <td>2023-06-03</td>
            <td><span class="badge badge-warning">待审核</span></td>
          </tr>
          <tr>
            <td>U003</td>
            <td>孙三</td>
            <td>sansan@example.com</td>
            <td>2023-07-12</td>
            <td><span class="badge badge-danger">禁用</span></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="text-center mt-4">
      <button class="btn btn-primary btn-sm">添加用户</button>
      <button class="btn btn-secondary btn-sm">刷新数据</button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

📌 亮点总结：

使用 table-responsive 确保移动端可用。
table-striped 和 table-hover 提升可读性。
badge 组件用于状态标记，视觉上更清晰。
按钮使用 btn-sm 保持整体风格统一。

这个案例可以作为你项目中“管理后台”的基础模板。

总结：Bootstrap4 表格，你的开发加速器

通过本文，你已经掌握了 Bootstrap4 表格的核心用法。它不只是一个“样式工具”，更是一种开发思维的体现：用现成的组件，快速构建可维护、可扩展的界面。

无论是初学者还是中级开发者，只要掌握了这些技巧，就能在项目中快速搭建出专业级的数据展示界面。它省去了你反复调试边距、对齐、响应式等琐碎问题的时间。

记住，优秀的开发不是“从零造轮子”，而是“站在巨人肩膀上造更高效的轮子”。Bootstrap4 表格，就是那个“巨人”。

当你下次需要展示数据时，不妨先试试它——你会发现，原来做网页也可以这么简单、这么美。