bootstrap本身不提供列表排序功能，其css和js均无内置列表自动排序逻辑；所谓可排序效果需依赖javascript手动实现或引入sortablejs、datatables等第三方库。
Bootstrap 本身不提供列表排序功能
Bootstrap 是一个 CSS 框架，bootstrap.css 和 bootstrap.js 都没有内置的列表（<ul></ul> / <ol></ol> / <tbody>）自动排序逻辑。你看到的“可排序列表”效果，一定是靠 JavaScript 手动实现的，或者引入了第三方库（比如 <code>sortablejs、jQuery UI Sortable、或 DataTables 的排序插件）。
常见错误现象：data-sortable="true" 这类自定义属性在纯 Bootstrap 下完全无效；加了 class="list-group sortable" 也不会触发排序 —— 因为 Bootstrap 根本没注册这个行为。
- 如果用的是 Bootstrap 5，确认你没误以为
data-bs-*属性能控制排序（它只管折叠、弹出、提示等原生交互） - 若项目已引入
jQuery，可手写sort()+append()实现简单文本排序，但注意 DOM 重排开销 - 对表格排序，更推荐用
DataTables（支持服务端/客户端、多列、类型识别），它和 Bootstrap 样式兼容好，只需加class="table table-striped"
用 sortablejs 实现拖拽排序最轻量可靠
SortableJS 是目前与 Bootstrap 列表集成度最高、无依赖、体积小（~14KB gzipped）的方案。它不改 HTML 结构，直接操作 <ul></ul> 或 <div class="list-group"> 的子元素顺序。<p>使用场景：后台管理中的菜单配置、任务项优先级调整、侧边栏导航排序等需要用户手动干预顺序的场合。</p>
<ul>
<li>必须给容器加 <code>id 或明确的 class，例如 <ul id="task-list" class="list-group"></ul>
animation: 150 避免拖拽卡顿；ghostClass: "list-group-item-secondary" 可让拖拽影子有视觉反馈onEnd 回调，读取 evt.item.dataset.id 或 evt.newIndex，发请求更新后端顺序字段preventOnFilter: false + filter: ".disabled" 可跳过不可拖项Bootstrap 列表交互的隐藏代价
表面看 list-group + list-group-item 点击、悬停都自带样式，但真实项目里容易踩坑：
- 语义混淆：
list-group-item-action会让<a></a>和<button></button>表现一致，但键盘焦点、role、tabindex需手动补全，否则 WCAG 2.1 AA 不达标 - 动态增删 item 后，
:first-child/:last-child圆角会失效 —— Bootstrap 4+ 改用border-radius类控制，得同步加rounded-top/rounded-bottom - 嵌套列表（如树形结构）时，
list-group-flush会把所有内边距清空，导致层级缩进丢失，必须额外写 CSS 修复padding-left - 移动端长按触发系统菜单（复制/搜索），干扰拖拽，需加
user-select: none和-webkit-touch-callout: none
为什么别用 Bootstrap 自带 JS 做排序交互
Bootstrap 的 JS 插件（collapse、dropdown、modal）设计目标是「状态切换」，不是「数据重组」。强行用 Tab + data-bs-toggle="collapse" 模拟排序，会导致：
- DOM 节点位置不变，只是显隐切换 —— 用户感知是“展开/收起”，不是“调换顺序”
- 无法获取新顺序，
aria-sort、data-index等排序元信息全靠自己维护，极易脱节 - 键盘操作（
↑↓移动焦点）和屏幕阅读器无法识别逻辑顺序变化，可访问性直接归零 - 性能上，频繁 toggle 大量 item 的
height和opacity动画，比直接移动节点慢 3–5 倍（实测 Chrome DevTools Performance 面板）
真正需要排序时，别绕弯子 —— 用 SortableJS 或原生 Array.sort() + innerHTML 重写，再套 Bootstrap 样式。复杂点在于状态同步和可访问性补全，而不是“怎么让 Bootstrap 帮我排序”。
