首页
/ Bootstrap Table 快速入门指南：构建功能强大的数据表格

Bootstrap Table 快速入门指南：构建功能强大的数据表格

2026-02-04 04:54:59作者：咎竹峻Karen
bootstrap-table
An extended table for integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
项目地址：https://gitcode.com/gh_mirrors/bo/bootstrap-table

什么是 Bootstrap Table

Bootstrap Table 是一个基于 Bootstrap 框架的扩展插件，专门用于创建功能丰富、响应式的数据表格。它完美继承了 Bootstrap 的设计风格，同时提供了大量增强功能，如排序、分页、搜索、导出等，让开发者能够快速构建专业级的数据展示界面。

环境准备

在开始使用 Bootstrap Table 之前，需要确保项目中已经包含以下基础依赖：

  1. Bootstrap 5：提供基础样式和组件
  2. jQuery：处理 DOM 操作和事件
  3. Bootstrap Icons（可选）：用于表格中的图标显示

快速集成方式

最简单的方式是通过 CDN 引入所需资源：

1. 引入 CSS 文件

将以下代码放入 HTML 的 <head> 部分：

<!-- Bootstrap 核心 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

<!-- Bootstrap Table CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">

2. 引入 JavaScript 文件

将以下脚本放在页面底部，</body> 标签之前：

<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<!-- Bootstrap 核心 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- Bootstrap Table JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>

基础表格实现

下面是一个完整的 HTML5 模板示例，展示了如何创建一个简单的 Bootstrap Table：

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的第一个 Bootstrap Table</title>
    
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
</head>
<body>
    <div class="container mt-3">
        <table data-toggle="table">
            <thead>
                <tr>
                    <th data-sortable="true">ID</th>
                    <th data-sortable="true">产品名称</th>
                    <th data-sortable="true">价格</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>笔记本电脑</td>
                    <td>¥5999</td>
                    <td><span class="badge bg-success">有货</span></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>智能手机</td>
                    <td>¥3999</td>
                    <td><span class="badge bg-warning">预售</span></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>平板电脑</td>
                    <td>¥2599</td>
                    <td><span class="badge bg-danger">缺货</span></td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 引入脚本文件 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
</body>
</html>

核心特性说明

1. 响应式设计

Bootstrap Table 自动适应不同屏幕尺寸，在移动设备上也能良好显示。可以通过添加 data-responsive 属性启用响应式模式：

<table data-toggle="table" data-responsive="true">

2. 排序功能

只需在表头添加 data-sortable="true" 属性即可启用列排序：

<th data-sortable="true">价格</th>

3. 分页支持

通过简单的配置即可实现客户端分页：

<table data-toggle="table" data-pagination="true" data-page-size="5">

4. 搜索功能

内置搜索框可以快速筛选表格内容：

<table data-toggle="table" data-search="true">

最佳实践建议

  1. 合理设置表格宽度：为表格容器添加 table-responsive 类，确保在小屏幕上不会出现水平滚动条
  2. 优化列宽：使用 data-width 属性为重要列分配更多空间
  3. 使用图标增强体验：结合 Bootstrap Icons 为操作按钮添加直观图标
  4. 服务器端处理大数据：当数据量很大时，考虑使用服务器端分页和排序

常见问题解答

Q: 表格没有正确显示样式怎么办？ A: 请检查 HTML5 doctype 声明是否正确，并确保所有依赖文件按正确顺序加载。

Q: 如何自定义表格外观？ A: 可以通过覆盖 Bootstrap Table 的 CSS 类或使用主题扩展来实现自定义样式。

Q: 排序功能不起作用？ A: 确保在表头添加了 data-sortable="true" 属性，并检查数据格式是否一致。

通过本指南，您应该已经掌握了 Bootstrap Table 的基本使用方法。这个强大的插件能够显著提升数据展示效果，同时保持与 Bootstrap 生态系统的完美兼容。

bootstrap-table
An extended table for integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
项目地址：https://gitcode.com/gh_mirrors/bo/bootstrap-table
登录后查看全文

相关内容推荐

1 Bootstrap Table 固定列详解2 jQuery-TreeGrid：让层级数据展示更简单的实战指南3 推荐：react-bootstrap-table2 —— 灵活且强大的React表格解决方案4 如何轻松实现表格列固定？bootstrap-table-fixed-columns 完整使用指南5 Bootstrap Table 固定列插件使用教程6 3大创新方案：彻底解决前端表格数据展示难题的实战指南7 ```markdown8 【亲测免费】 提升表格展示体验：Bootstrap Table 固定列详解9 Bootstrap Table 自动刷新功能：auto-refresh 插件配置指南10 Bootstrap-Table 表格列显示/隐藏全量控制方法详解
热门项目推荐
相关项目推荐

热门内容推荐

1 编程实践项目探索指南：从零构建技术能力体系2 技术解构式学习：从0到1构建你的编程知识体系3 构建自己的技术世界：build-your-own-x项目的实践探索指南4 解锁编程技能的实践之旅：从零构建你的技术世界5 技术实践探索：从零开始构建核心系统的实践指南6 亲手锻造技术引擎：从0到1构建核心系统的实践指南

项目优选

收起
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
517
565
kernelkernel
deepin linux kernel
C
33
17
ops-transformerops-transformer
本项目是CANN提供的transformer类大模型算子库，实现网络在NPU上加速计算。
C++
1.07 K
2.6 K
pytorchpytorch
作为 Ascend for PyTorch 社区的核心组件，TorchNPU 是昇腾专为 PyTorch 打造的深度学习适配插件，使 PyTorch 框架能够直接调用昇腾 NPU，为开发者提供昇腾 AI 处理器的超强算力。
Python
844
1.31 K
ops-nnops-nn
本项目是CANN提供的神经网络类计算算子库，实现网络在NPU上加速计算。
C++
869
1.75 K
llvm-projectllvm-project
本仓库fork自上游llvm-project仓，面向openEuler社区提供了前端C/C++语言的支持，中端通用优化能力的增强，以及后端多架构的支持，包括AArch64/X86/LoongArch/RISC-V/SW64等。
C++
159
64
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！
C
1.13 K
747
cann-learning-hubcann-learning-hub
CANN 学习中心仓，支持在线互动运行、边学边练，提供教程、示例与优化方案，一站式助力昇腾开发者快速上手。
Jupyter Notebook
845
434
llvm-projectllvm-project
LLVM 项目是一个模块化、可复用的编译器及工具链技术的集合。此fork用于添加仓颉编译器的功能，并支持仓颉编译器项目。
C++
961
832
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
1.29 K
1.4 K