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

巫文钧Jill

于 2025-06-03 09:10:04 发布

阅读量310

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00386/article/details/148393588

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

bootstrap-table wenzhixin/bootstrap-table: 是一个基于 Bootstrap 的表格插件，它没有使用数据库。适合用于数据展示，特别是对于需要使用 Bootstrap 和表格展示的场景。特点是表格插件、Bootstrap、无数据库。项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table

什么是 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 生态系统的完美兼容。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考