Bootstrap仅负责预约页界面呈现，核心逻辑需自行实现：用原生表单+Bootstrap样式搭建交互，动态加载教练与时段，JS绑定按钮填值，Modal反馈结果，注重移动端触摸体验与输入优化。
Bootstrap 本身不提供预约逻辑，只负责界面呈现；私教预约网页的核心是表单交互 + 时间选择 + 后端对接，Bootstrap 能快速搭出结构清晰、响应式的预约页，但别指望它自动处理“某教练周三14:00是否已被约”这类业务判断。
用 form + input + select 搭预约主表单
别一上来就找“预约组件”，Bootstrap 没有专用预约控件。直接用原生表单元素，靠 Bootstrap 的 form-control、form-select 和栅格类控制样式和布局：
-
select用于教练姓名、课程类型（力量训练/瑜伽/康复等），选项应由后端 API 动态填充，静态写死容易过期 -
input type="date"和input type="time"组合选日期+时段，注意 Safari 对type="time"支持弱，生产环境建议加 polyfill 或换为select枚举常见时段（如 09:00、10:30…） - 手机号用
input type="tel"，触发手机端数字键盘；邮箱必须加type="email"，让浏览器做基础校验 - 所有
input必须带required属性，配合 Bootstrap 的was-validated类实现提交前反馈
用 card + list-group 展示教练档期卡片
用户需要直观看到“谁有空、什么时候能约”，不能只靠下拉菜单。用 Bootstrap 的 card 包裹每位教练信息，内嵌 list-group 显示可约时段：
<div class="card">
<div class="card-body">
<h5 class="card-title">李教练</h5>
<p class="text-muted">认证力量训练师｜5年经验</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between">
<span>08月26日（周一）</span>
<span><button class="btn btn-sm btn-outline-primary">10:00</button> <button class="btn btn-sm btn-outline-primary">15:30</button></span>
</li>
</ul>
</div>
关键点：按钮点击后应自动填入上方表单的日期和时间字段，并禁用其他时段按钮——这得靠 JS 监听 click，不是 Bootstrap 自带行为。
用 modal 做预约成功/失败反馈，而非跳转新页
提交后别 location.href = "success.html"，用户体验断层。用 Bootstrap 的 modal 弹出轻量提示：
- 成功时显示订单号、预约详情、取消链接（需后端提供取消接口）
- 失败时明确提示原因：
"该时段已被预约"、"手机号格式错误"、"网络异常，请重试"——这些文案不能写死在 modal 里，要根据后端返回的error.code动态渲染 - modal 关闭后，清空表单或保留已填内容（视场景定），用
form.reset()或手动设value = ""
移动端适配重点在触摸目标和输入体验
健身房用户常在手机上临时约课，但 Bootstrap 默认的 form-control 在小屏上点击区域太小，易误触：
- 给所有按钮、时段
button加py-2（上下内边距）和px-3，确保最小触摸尺寸 ≥ 48px -
select在 iOS 上滚动卡顿，改用data-bs-toggle="dropdown"自定义下拉，或直接用radio+btn-group模拟单选 - 避免在模态框里放长表单，iOS Safari 会遮挡软键盘；必要时用
position: fixed+top: 0把表单顶到键盘上方（需 JS 监听focus事件）
真正难的不是怎么画出这个页面，而是把“用户点了15:30”准确传给后端、再把“已锁定”状态实时同步回所有打开该页的设备——这部分和 Bootstrap 无关，得靠 WebSocket 或轮询，但页面结构得先立住。
