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

2026-02-04 04:54:59作者：咎竹峻Karen

什么是 Bootstrap Table

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

环境准备

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

Bootstrap 5：提供基础样式和组件
jQuery：处理 DOM 操作和事件
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">

最佳实践建议

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

常见问题解答

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

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

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

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

bootstrap-table

项目地址：https://gitcode.com/gh_mirrors/bo/bootstrap-table

登录后查看全文

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

什么是 Bootstrap Table

环境准备

快速集成方式

1. 引入 CSS 文件

2. 引入 JavaScript 文件

基础表格实现

核心特性说明

1. 响应式设计

2. 排序功能

3. 分页支持

4. 搜索功能

最佳实践建议

常见问题解答

热门内容推荐

最新内容推荐

项目优选

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

什么是 Bootstrap Table

环境准备

快速集成方式

1. 引入 CSS 文件

2. 引入 JavaScript 文件

基础表格实现

核心特性说明

1. 响应式设计

2. 排序功能

3. 分页支持

4. 搜索功能

最佳实践建议

常见问题解答

相关内容推荐

热门内容推荐

最新内容推荐

项目优选