Bootstrap 不提供 Bug 看板内置组件，但可用栅格、卡片、徽章等快速构建可维护 UI 层；需自行实现状态流转、权限、数据加载等业务逻辑。
Bootstrap 本身不提供 Bug 看板的内置组件，但可以用它的栅格、卡片、徽章、进度条和工具类快速搭出可用的缺陷跟踪看板——关键不是“用 Bootstrap 做看板”，而是“用 Bootstrap 快速实现可维护的看板 UI 层”，业务逻辑（如状态流转、权限、数据加载）必须自己补全。
用 card + badge 组合表达缺陷卡片的基本结构
每个 Bug 卡片建议固定为 card 容器，顶部用 badge 标明状态（如 badge-danger 对应 “Open”），标题用 card-title，关键字段（ID、标题、负责人）放在 card-body，底部用小号文字显示最后更新时间。避免嵌套过多层级，否则响应式会错乱。
常见错误：把整个看板塞进一个 container-fluid 再手动写 float: left ——这会破坏 Bootstrap 5 的 Flexbox 栅格行为。正确做法是用 row 包裹多列 col-md-4 或 col-sm-6，每列放一组同状态卡片。
- 状态 badge 推荐统一用
text-white+ 背景色类（如bg-warning），不要依赖自定义 CSS 覆盖默认样式 - 卡片内禁止使用
table布局字段，改用small+text-muted行内排布 - 如果需要拖拽排序（如 Kanban），
card必须设draggable="true"，且不能依赖card-deck（已废弃）
用 progress + list-group 展示模块级缺陷分布
后台看板常需汇总各模块 Bug 数量与解决进度。直接用 progress 组件配 list-group-item 最轻量：每个 list-group-item 包含模块名、当前未关闭数、总缺陷数、progress 条（值为 100 * (resolved / total)）。
注意 progress 的 aria-valuenow 必须动态设置，否则屏幕阅读器无法识别；若后端返回的是字符串数字（如 "85"），JS 中需先 parseInt() 再赋值，否则进度条不渲染。
- 避免在
progress-bar内写文字说明（如 “85%”），应放在外层small标签里，否则移动端文字会被裁切 - 模块列表超过 5 项时，加
max-height: 200px+overflow-y: auto，但别用scrollbar自定义——它在 Safari 上兼容性差 - 若某模块无缺陷，显示
text-center text-muted的 “暂无缺陷”，而不是留空或隐藏整行
用 modal 实现缺陷详情弹窗，但必须禁用 backdrop 自动关闭
点击卡片打开详情页是刚需，但 Bootstrap 的 modal 默认点击遮罩层（backdrop）会关闭弹窗——这会让用户误操作丢失未保存的评论或状态修改。必须显式设置 data-bs-backdrop="static" 和 data-bs-keyboard="false"。
另一个高频问题：弹窗内容从 API 加载时，modal 框体已渲染但 body 为空，导致高度塌陷。解决方案是在 show.bs.modal 事件中先清空 .modal-body，再用 fetch() 加载内容并插入，最后调用 modal.show()（不要提前 show）。
- 弹窗标题栏右侧必须放关闭按钮（
btn-close），不可只靠右上角 × 图标——它没有语义化标签，无障碍支持差 - 状态下拉框（如 “Open → In Progress”）要绑定
change事件并立即提交，别等用户点“保存”，否则离开弹窗会丢失变更 - 弹窗内表单提交后，用
modal.hide()关闭，然后手动刷新对应卡片 DOM，而非重载整页
真正难的从来不是画出看板样式，而是让每张卡片的状态变更实时同步到其他在线用户界面——这需要 WebSocket 或定时轮询配合乐观更新策略。Bootstrap 只负责让你少写 200 行 CSS，别指望它帮你处理并发冲突或权限校验。
