Bootstrap仅为UI框架，不提供防作弊能力；防作弊核心在于后端校验、WebRTC视频流中转、visibilitychange事件监听、心跳上报与服务端异常聚合判定，前端仅负责信号采集和监控看板展示。
Bootstrap 本身不提供防作弊能力，它只是个 UI 框架。想靠 Bootstrap 实现“在线考试防作弊监考后台”，属于技术定位错误——这任务核心在后端逻辑、浏览器 API 限制、服务端校验和行为分析，UI 层最多做个监控看板。
下面直说关键点怎么落地：
监考后台的实时画面监控怎么做
前端用 WebRTC 接入考生摄像头（需考生主动授权），后端用 Node.js + Socket.IO 或 WebRTC SFU（如 mediasoup）中转流，不能直接用 Bootstrap 渲染视频流。Bootstrap 只负责把 标签套进 .card 和 .row 里排版。常见错误是试图用 Bootstrap 的 modal 或 carousel 控制多路画面切换——性能差、延迟高、无法同步音视频。
如何检测考生切屏、离开页面、打开新标签
这部分依赖浏览器原生 API，不是 CSS 或组件能解决的：
- 用 document.hidden + visibilitychange 事件判断页面是否失焦
- 用 beforeunload 拦截非正常退出（但无法阻止强制关闭）
- blur + focus 判断窗口激活状态（注意：移动端效果差）
- 真正有效的做法是结合心跳上报 + 后端超时判定，前端只负责采集信号并发送到 /api/heartbeat 接口
- 别信网上“用 Bootstrap tooltip 提示切屏”的方案——tooltip 本身就会触发 blur，造成误报
考生行为异常标记该存在哪一层
标记逻辑必须放在后端：
- 前端仅上报原始事件（如 { type: "tab-switch", timestamp: 171xxxx } ）
- 后端按规则聚合：30 秒内 visibilitychange 超过 2 次 + mousemove 骤降 → 触发 anomaly_level: 2
- 监考后台 UI（用 Bootstrap 做）只消费 /api/exam/sessions/{id}/alerts 返回的结构化告警，不做判断
- 若把规则写在前端 JS 里，考生禁用 JS 或改 console 就直接绕过
为什么不能用 Bootstrap 的 modal 做强制交卷弹窗
因为 Bootstrap modal 是 DOM 层级控制，考生用 DevTools 删除 .modal-backdrop 或设 display: none 就能继续答题。
- 真实交卷动作必须由后端发起最终状态锁定：POST /api/exam/submit?force=true
- 前端 modal 只是提示层，提交按钮点击后应立即禁用，并向后端请求确认，而非仅靠 data-bs-dismiss
- 更稳妥的做法是倒计时结束时，前端自动调用 fetch("/api/exam/end", {method: "POST"})，后端返回 200 后才清空本地答题数据
真正难的是多源行为对齐（比如摄像头帧时间戳 vs 页面 visibilitychange 时间戳 vs 心跳包到达时间），这个时间差处理不好，监考后台显示的“异常时刻”就根本不可信。别在 Bootstrap 的栅格系统上花时间调样式，先确保后端能稳定收、准确定、可追溯。
