首页
/ 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
登录后查看全文
热门项目推荐
相关项目推荐

项目优选

收起
kernelkernel
deepin linux kernel
C
28
16
atomcodeatomcode
Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。 ｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started
Rust
576
99
docsdocs
暂无描述
Dockerfile
710
4.51 K
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
958
955
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.61 K
942
pytorchpytorch
Ascend Extension for PyTorch
Python
573
694
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
414
339
cherry-studiocherry-studio
🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端
TypeScript
1.43 K
116
flutter_flutterflutter_flutter
暂无简介
Dart
952
235
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
12
2