Bootstrap Table bootstrap-table 1.27.3

Bootstrap Table 是数据驱动的表格库：排序、分页、搜索、工具栏开箱即用。本页基于 Bootstrap 5.3.8 演示。

官方对照

Bootstrap 官方只提供 <table> 的基础视觉样式（条纹、边框、悬浮），没有排序、分页、搜索等数据能力；bootstrap-table 补齐了这一整层。

官方已有官方已有表格基础样式，本库是其数据能力增强版

对比维度	Bootstrap 官方	bootstrap-table
能力定位	纯 CSS 表格外观：条纹、边框、悬浮高亮	数据驱动表格：本地/远程数据 + 交互组件
核心特性	无脚本交互能力	列排序、客户端分页、顶部搜索框、工具栏、列显隐
依赖与体积	无额外依赖	需 jQuery + 本库 CSS/JS（约 50KB 未压缩）；Bootstrap 5 无冲突
样式定制	table 工具类组合	classes、theadClasses 等选项 + Bootstrap 表格类直接复用
适用场景	静态展示型表格	管理后台数据列表、需要排序/分页/搜索的表格

引入方式

通过 jsDelivr 固定版本引入。依赖说明：dist/bootstrap-table.min.js 的 UMD 构建基于 jQuery，需先引入 jQuery（本页固定 3.7.1）；它原生支持 Bootstrap 5 的样式体系，无版本冲突。本页固定 bootstrap-table 1.27.3。

引入代码

<!-- 1. Bootstrap 5.3（页面已引入，此处示意） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

<!-- 2. jQuery（bootstrap-table dist 构建依赖） -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

<!-- 3. bootstrap-table 样式与脚本（原生支持 Bootstrap 5） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.27.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.27.3/dist/bootstrap-table.min.js"></script>

数据表格（排序 / 分页 / 搜索）

本地传入 data 数组：点列头可排序，右上角搜索框实时过滤，底部分页器翻页。

HTML 示例

<!-- HTML：空 table 占位，由 JS 渲染 -->
<table id="demoDataTable"></table>

<script>
$('#demoDataTable').bootstrapTable({
  columns: [
    { field: 'id',    title: '#' },
    { field: 'name',  title: '姓名', sortable: true },
    { field: 'dept',  title: '部门', sortable: true },
    { field: 'city',  title: '城市', sortable: true },
    { field: 'salary', title: '月薪(元)', sortable: true }
  ],
  data: [
    { id: 1, name: '王小明', dept: '前端', city: '北京', salary: 22000 },
    { id: 2, name: '李晓华', dept: '后端', city: '上海', salary: 25000 },
    // …共 12 行…
  ],
  search: true,      // 顶部搜索框，实时过滤
  pagination: true,  // 底部分页器
  pageSize: 5        // 每页 5 条
});
</script>

自定义样式

通过 classes 选项叠加 Bootstrap 表格类（条纹、边框、悬浮、紧凑），用 theadClasses 给表头加深色背景。

HTML 示例

<table id="demoStyleTable"></table>

<script>
$('#demoStyleTable').bootstrapTable({
  columns: [
    { field: 'id',    title: '#' },
    { field: 'name',  title: '姓名' },
    { field: 'role',  title: '角色' },
    { field: 'status', title: '状态' }
  ],
  data: [
    { id: 1, name: '王小明', role: '前端工程师', status: '在职' },
    { id: 2, name: '李晓华', role: '后端工程师', status: '在职' },
    { id: 3, name: '张海燕', role: '产品经理',   status: '休假' },
    { id: 4, name: '赵子昂', role: '测试工程师', status: '在职' }
  ],
  classes: 'table table-striped table-bordered table-hover table-sm',
  theadClasses: 'table-dark',
  pagination: false
});
</script>