Bootstrap仅提供UI样式和基础组件，不支持排班逻辑、状态管理、权限控制等后台核心功能，需配合Vue/React前端框架、后端服务及数据库实现，其角色限于UI层“皮肤”。
怎么让 Bootstrap 表格支持可编辑的排班单元格
门诊排班最常见需求是点击某医生某时段单元格，弹出编辑框改状态（出诊/停诊/替班）。Bootstrap 本身没有可编辑表格组件，得自己封装：
- 用
table+tbody+tr+td布局，每格加data-doctor-id、data-date、data-slot等属性存上下文 - 监听
td的click事件，用bootstrap modal（Modal组件）展示编辑表单，而不是直接contenteditable—— 后者无法可靠绑定状态、易误操作、无提交校验 - 避免给整张表加
table-responsive后再嵌套复杂交互，横向列多时滚动会打断点击流；建议用固定列宽 + 横向滚动容器（<div class="table-container"> + <code>overflow-x: auto）为什么不能只靠 Bootstrap 的 Form 验证做挂号提交校验
挂号要检查的远不止“手机号格式”或“必填项”：
-
submit时需实时查：该患者今日是否已挂过同科室？该时段是否已被约满？医生是否当日停诊？—— 这些必须调后端 API，Bootstrap 的novalidate+setCustomValidity()只能做前端快筛，不能替代服务端校验 - 患者选择科室后，医生下拉框必须动态加载（带
data-dept-id过滤），不能把所有医生全塞进 HTML；否则 200 个医生选项会让页面卡顿，且无法体现“某医生只在周二上午出诊”这类规则 - 用
form-control+is-invalid显示错误没问题，但错误文案必须来自后端返回的error.code（如"SLOT_FULL"、"PATIENT_LIMIT_EXCEEDED"），而不是写死的中文提示
怎么用 Bootstrap Grid 布局门诊日视图但不崩塌
按天展示 8:00–17:00 每 30 分钟一个号段，共 18 列，加上医生姓名列，很容易超出屏幕。纯靠
col-md-1会挤成一团：- 放弃“一格一时段”的像素级对齐幻想；改用“块状时间轴”：每个医生占一行，内部用
flex容器（Bootstrap 5 的d-flex）横向铺时段卡片，卡片用flex-shrink-0防压缩 - 为避免水平滚动条被遮挡，外层容器加
overflow-x: auto和pb-2（留出滚动条空间），同时禁用table的默认响应式包裹 - 移动端优先隐藏非关键列（如“挂号员”、“备注”），用
d-none d-md-table-cell控制显示，别试图在手机上塞满 18 个时段
哪些 Bootstrap 组件容易被误用导致权限失控
后台系统最怕把本该后端控制的权限逻辑，错误地交给前端组件处理：
- 用
disabled属性禁用按钮（如“退号”按钮）不等于安全 —— 用户删掉disabled就能发请求。真正的权限必须由后端返回can_cancel: false，前端仅据此决定是否渲染按钮或调用接口 -
dropdown菜单里放“修改排班”“导出数据”等敏感项，不能只靠v-if（Vue）或ngIf（Angular）控制显隐；菜单结构本身应由后端返回的menu_items数组驱动 - 别用
collapse组件来“隐藏”未授权模块 —— 展开所需 HTML 和 JS 仍在源码里。敏感路由、API 调用、数据字段都必须后端拦截
-
