Repolode
wenzhixin

wenzhixin/bootstrap-table

面向 Bootstrap 等 CSS 框架的扩展表格插件,支持排序、分页、行选择和扩展功能。

Star
11,812
Fork
4,335
未关闭 Issue
199
最近提交
昨天

这是什么?

Bootstrap Table 是一个 JavaScript 插件,可以把普通 HTML 表格扩展为功能完整的数据表格。它与 Bootstrap 集成良好,同时也支持 Semantic UI、Bulma、Material Design、Foundation 和 Vue.js,适合已在这些框架上构建的项目。

开箱即用的功能包括点击排序、分页、复选框或单选框的单行与多行选择、列、表头和表尾的显示与隐藏、固定表头滚动,以及每行的卡片视图和详情视图。数据可通过 AJAX 以 JSON 格式加载,表格既可以通过 JavaScript 参数配置,也可以通过 HTML data 属性配置。

项目采用 MIT 许可证,可通过 npm、Yarn 或 CDN 安装。插件还提供本地化支持和一系列扩展,官网提供文档与在线编辑器。

核心功能

  • 01点击列标题排序,并支持分页
  • 02复选框或单选框的单行与多行选择
  • 03列、表头和表尾可显示或隐藏
  • 04支持固定表头滚动与响应式布局
  • 05行数据支持卡片视图和详情视图
  • 06支持通过 AJAX 加载 JSON 数据并提供本地化

适用场景

  • 在基于 Bootstrap 的管理后台中添加可排序、可分页的数据表格
  • 在 Web 应用中展示通过 AJAX 从服务端加载的记录
  • 构建可选择行的列表,供用户批量执行操作

快速上手

  1. 1

    使用 npm 安装该包

    npm install bootstrap-table
  2. 2

    或使用 Yarn 安装该包

    yarn add bootstrap-table

使用前须知

  • 需要配合 Bootstrap 或其他 CSS 框架使用以获得样式。

标签

#bootstrap#table#datatable#jquery-plugin#pagination#javascript#css-framework#ui-component#bootstrap-table#bulma

常见问题

bootstrap-table 是什么?
面向 Bootstrap 等 CSS 框架的扩展表格插件,支持排序、分页、行选择和扩展功能。 Bootstrap Table 是一个 JavaScript 插件,可以把普通 HTML 表格扩展为功能完整的数据表格。它与 Bootstrap 集成良好,同时也支持 Semantic UI、Bulma、Material Design、Foundation 和 Vue.js,适合已在这些框架上构建的项目。
bootstrap-table 可以免费使用吗?用的什么许可证?
bootstrap-table 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
bootstrap-table 还在维护吗?
活跃维护中。bootstrap-table 最近一次提交是在 2026年11月6日。
bootstrap-table 适合用来做什么?
在基于 Bootstrap 的管理后台中添加可排序、可分页的数据表格 在 Web 应用中展示通过 AJAX 从服务端加载的记录 构建可选择行的列表,供用户批量执行操作
bootstrap-table 怎么安装和运行?
使用 npm 安装该包: npm install bootstrap-table 或使用 Yarn 安装该包: yarn add bootstrap-table
在哪里获取 bootstrap-table?
源代码和安装说明在 GitHub 上:https://github.com/wenzhixin/bootstrap-table

概要由 AI 根据项目 README 生成;GitHub 数据每日更新。

相关项目