Bootstrap 表格

作者likuolei

Bootstrap 的表格（Tables）是其 CSS 框架的重要组成部分，提供了一套样式和工具类，用于创建美观、响应式的表格。Bootstrap 的表格样式支持多种定制选项，如边框、颜色、条纹、响应式布局等，适合展示结构化数据。以下是对 Bootstrap 表格的中文讲解，涵盖核心功能、类名、用法和示例，基于最新版本 Bootstrap 5.3.3（截至 2025 年 10 月 11 日）。

1. Bootstrap 表格概述

Bootstrap 的表格样式通过简单的类名增强 HTML 的 <table> 元素，提供一致的外观和交互功能。其主要特点包括：

  • 统一样式：为表格提供清晰的边框、间距和字体。
  • 响应式支持：支持水平滚动或堆叠布局以适配小屏幕。
  • 灵活定制：通过工具类调整颜色、边框、条纹等。
  • 可访问性：内置样式优化了表格的可读性和屏幕阅读器兼容性。

2. 核心表格类

Bootstrap 提供以下主要类来格式化表格：

(1) 基本表格

使用 .table 类为 <table> 添加基础样式，包括边框、间距和等宽字体。

  • 用法：
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>25</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
  • 效果：表格具有清晰的边框、统一的单元格内边距和对齐方式。

(2) 条纹表格

使用 .table-striped 为表格行添加交替背景色（条纹效果），增强可读性。

  • 用法：
  <table class="table table-striped">
    <!-- 表格内容 -->
  </table>

(3) 边框表格

  • 带边框：使用 .table-bordered 为所有单元格添加边框。
  <table class="table table-bordered">
    <!-- 表格内容 -->
  </table>
  • 无边框：使用 .table-borderless 移除边框。
  <table class="table table-borderless">
    <!-- 表格内容 -->
  </table>

(4) 悬停效果

使用 .table-hover 为表格行添加鼠标悬停高亮效果。

  • 用法：
  <table class="table table-hover">
    <!-- 表格内容 -->
  </table>

(5) 颜色变体

使用 .table-* 类为表格应用主题颜色（如 primary、success、danger 等）。

  • 用法：
  <table class="table table-primary">
    <!-- 表格内容 -->
  </table>
  • 效果：表格整体应用浅蓝色背景（对于 table-primary）。

(6) 紧凑表格

使用 .table-sm 减少单元格内边距，创建更紧凑的表格。

  • 用法：
  <table class="table table-sm">
    <!-- 表格内容 -->
  </table>

(7) 表头样式

  • 深色表头：使用 .table-dark 为整个表格或 <thead> 添加深色背景。
  <table class="table">
    <thead class="table-dark">
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
  • 浅色表头：使用 .table-light（默认）。

(8) 单元格样式

可以为单个 <tr>、<td> 或 <th> 添加背景色或上下文类：

  • 背景色：.bg-* 或 .table-*（如 .table-success）。
  • 文字颜色：.text-*。
  • 用法：
  <tr class="table-success">
    <td>1</td>
    <td>张三</td>
    <td>25</td>
  </tr>

3. 响应式表格

Bootstrap 提供两种方式实现表格的响应式布局：

(1) 水平滚动

将表格包裹在 .table-responsive 或 .table-responsive-{breakpoint} 中，启用水平滚动以适配小屏幕。

  • 用法：
  <div class="table-responsive">
    <table class="table">
      <!-- 宽表格内容 -->
    </table>
  </div>
  • 断点特定：如 .table-responsive-md（中等屏幕及以下启用滚动）。

(2) 堆叠布局

使用 .table-stacked（Bootstrap 5 中需自定义）或结合媒体查询将表格在小屏幕上转为垂直堆叠布局（需额外 CSS）。

4. 表格结构增强

  • 表头（<thead>）：用于分组表头内容，支持 .table-dark 或 .table-light。
  • 表体（<tbody>）：用于分组主体内容。
  • 表脚（<tfoot>）：用于总结行。
  • 标题（<caption>）：使用 .caption-top 将标题置于表格顶部：
  <table class="table">
    <caption class="caption-top">用户列表</caption>
    <!-- 表格内容 -->
  </table>

5. 定制表格样式

Bootstrap 的表格样式基于 Sass 变量，可通过以下方式定制：

  • 边框颜色：$table-border-color。
  • 条纹背景：$table-striped-bg。
  • 悬停背景：$table-hover-bg。
  • 字体和间距：$table-cell-padding-y、$table-cell-padding-x。

定制示例：

// custom.scss
$table-border-color: #007bff;
$table-striped-bg: rgba(0, 123, 255, 0.1);
$table-hover-bg: rgba(0, 123, 255, 0.2);

@import "node_modules/bootstrap/scss/bootstrap";

编译后引入：

<link href="custom.css" rel="stylesheet">

6. 完整示例

以下是一个综合展示表格功能的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 表格示例</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-4">
    <h2 class="text-center">Bootstrap 表格示例</h2>

    <!-- 条纹、边框、悬停表格 -->
    <h4>条纹表格</h4>
    <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover">
        <caption class="caption-top">用户数据</caption>
        <thead class="table-dark">
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>张三</td>
            <td>25</td>
            <td class="table-success">活跃</td>
          </tr>
          <tr>
            <td>2</td>
            <td>李四</td>
            <td>30</td>
            <td class="table-warning">待审</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4">共 2 条记录</td>
          </tr>
        </tfoot>
      </table>
    </div>

    <!-- 紧凑表格 -->
    <h4>紧凑表格</h4>
    <table class="table table-sm table-primary">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

7. 注意事项

  • 语义化：使用 <thead>、<tbody>、<tfoot> 等标签增强结构化，利于可访问性。
  • 响应式选择：对于宽表格，优先使用 .table-responsive 确保小屏幕可读。
  • 颜色对比：确保背景色（如 .table-dark）和文字色的对比度符合 WCAG 标准。
  • 性能：大型表格可能影响页面加载，考虑分页或异步加载数据。
  • 动态表格：若使用 JavaScript 动态生成表格，确保类名正确应用。

8. 学习资源

  • 官方文档：https://getbootstrap.com/docs/5.3/content/tables/
  • 中文教程：https://www.bootcss.com/（非官方）
  • X 平台：搜索“Bootstrap 表格”或“Bootstrap Tables”，查看社区分享的表格设计技巧。

如果你需要更详细的表格功能讲解（例如动态表格、排序功能）或实现特定表格效果的代码，请告诉我，我可以提供进一步的指导或示例！

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注