Bootstrap仅负责UI样式，权限配置需HTML结构+JavaScript控制+后端配合；用form-check实现多级权限表单，通过data-permission-group和原生JS实现联动，提交前用FormData校验空值与重复。
Bootstrap 本身不提供权限配置逻辑，只负责 UI 布局和交互样式；真正实现“用户权限配置表单”，关键在 HTML 结构设计 + JavaScript 控制权限状态 + 后端配合保存，而不是套个 form 就完事。
用 Bootstrap 的 form-check 实现多级权限勾选
权限表单本质是「多选 + 分组 + 可控联动」，Bootstrap 5 的 form-check 是最稳妥的选择，别用 custom-control（已废弃）或自己写 checkbox 样式。
- 每个权限项用
<div class="form-check"> 包裹，<code>input[type="checkbox"]必须有name和value，比如name="permissions"、value="user:delete" - 用
form-check-label的for属性绑定 ID，确保点击文字也能触发勾选 - 分组用
<fieldset></fieldset>+<legend></legend>，比如「用户管理」「日志查看」，视觉清晰且语义正确 - 避免直接用
form-switch表达权限——它更适合开/关全局功能，不是细粒度权限项 - 给每组 checkbox 的容器加
data-permission-group="user"，对应权限域 - 每组加一个「全选」复选框，
data-action="toggle-group"，并设data-target="user" - 监听它的
change事件，用document.querySelectorAll('[data-permission-group="user"] input[type="checkbox"]')批量设置checked - 注意：别用
jQuery，现代项目直接用原生addEventListener更轻、兼容性更好 - 提交时用
new FormData(formEl)获取所有选中的permissions值，它自动忽略未勾选项 - 转成数组后检查长度：
if (permissions.length === 0) { alert('至少选择一项权限'); return false; } - 用
new Set(permissions)去重，如果Set.size !== permissions.length，说明有重复 value（通常是 HTML 模板渲染错误导致） - 别用
serializeArray()或手动拼 query string——FormData天然支持文件上传扩展，也兼容后续加字段
用 data-permission-group 实现「全选/取消全选」联动
纯靠 Bootstrap CSS 做不了联动，必须加轻量 JS。不要写复杂状态管理，用自定义属性标记分组即可。
提交前校验权限值是否为空或重复
用户可能没选任何权限，也可能前端误传了空字符串或重复 value，后端虽会兜底，但前端提示能减少无效请求。
权限配置的难点不在样式，而在「哪些权限该显示给谁」「勾选后如何映射到角色策略」「是否要支持权限继承」——这些都得靠业务逻辑控制，Bootstrap 只管把 checkbox 排整齐、点起来顺手。别指望 class 名里带 permission 就自动有权限判断能力。
