Bootstrap仅提供UI组件，角色管理需自行实现业务逻辑：用table展示列表、Modal处理增删改、form-check实现权限勾选，并通过JavaScript对接后端API完成数据流闭环。
Bootstrap 本身不提供“角色管理”业务逻辑，它只是前端 UI 框架；真正要做的，是用 Bootstrap 的组件（如表格、模态框、表单、按钮）搭出符合权限系统需求的页面结构，再对接后端 API。别指望靠 bootstrap.min.js 自动实现增删改查角色——那得你写 JavaScript 或用框架（如 Vue/React）来驱动。
用 Bootstrap 表格展示角色列表（table + thead + tbody）
角色列表页最基础的是可读、可对齐、带操作列的表格。Bootstrap 5 的 table 类默认已支持响应式和斑马纹，但要注意几处实操细节：
- 给
<table> 加 <code>class="table table-striped table-hover"，避免手写 CSS 覆盖默认边框或 padding - 操作列（编辑/删除）建议固定宽度，加
style="width: 120px;"到<th> 和对应 <code><td>，防止文字换行挤乱布局 <li>如果角色名过长，用 <code>text-truncate配合col或max-width控制溢出，别依赖white-space: nowrap导致横向滚动 - 服务端分页更稳妥；若前端分页，别用
bootstrap-table这类老插件——它依赖 jQuery 且与 Bootstrap 5 冲突，直接用原生fetch+ 动态重绘tbody - 确保每个 Modal 的
id唯一，且触发按钮的data-bs-target值严格匹配（含#），例如：data-bs-target="#roleEditModal" - 不要在 Modal 内部再嵌套
.modal——Bootstrap 5 不支持多层 Modal 叠加，会丢失 backdrop 和 focus 锁定 - 编辑时需预填数据：监听
show.bs.modal事件，在回调里用document.getElementById("roleNameInput").value = roleName赋值，别用innerHTML直接塞整个表单 HTML - 关闭 Modal 后清空表单：监听
hidden.bs.modal事件，调用form.reset()，否则下次打开会残留上次输入 - 每个权限项用
<div class="form-check"> <input class="form-check-input" type="checkbox" value="user:read"><label class="form-check-label">查看用户</label> </div> - 别手动写
<input type="checkbox">然后自己画样式——失去form-check-input的 focus outline、disabled 状态适配、RTL 支持 - 批量操作（如“全选本页权限”）：用
querySelectorAll(".form-check-input")获取所有 checkbox 元素，遍历设置checked属性，别用setAttribute("checked", "")（这是初始值，不是当前状态） - 提交前校验是否至少选中一项：检查
document.querySelectorAll(".form-check-input:checked").length === 0，而不是依赖表单required属性（它对 checkbox 组无效）
用 Modal 实现角色新增/编辑（data-bs-toggle="modal" + data-bs-target）
Modal 是最常用交互载体，但容易因初始化时机或 DOM 结构出问题：
角色权限勾选用 form-check 而非自定义 checkbox
角色常关联多个权限项（如“用户管理”“订单导出”），用 Bootstrap 原生复选框组件最省心：
真正难的不是怎么画按钮或表格，而是把角色数据流串起来：点击“编辑”要拿到角色 ID → 请求详情 → 填进 Modal → 提交时构造正确 payload（比如 {name: "运营", permissions: ["order:export", "user:read"]}）→ 成功后刷新表格。这些逻辑 Bootstrap 一概不管，代码得你一行行写清楚。
