Bootstrap不提供现成电影选座组件，需用grid布局模拟影厅平面图：每排用.row，座位用.btn.btn-sm.seat-btn+data-row/data-col存坐标，状态由JS对象管理，DOM仅作视图层。
Bootstrap 本身不提供现成的“电影选座”组件，它只负责基础布局、响应式和样式规范；真正实现座位交互逻辑、状态管理、实时渲染，得靠你自己用 JavaScript 控制 DOM 和数据。别指望靠几个 class 就能跑起来。
怎么用 Bootstrap 快速搭出选座界面骨架
核心是用 grid 布局模拟影厅平面图，每排座位用 .row，每个座位用 .col 或 .col-auto 包裹一个按钮或带状态的 <div>。避免用 <code>table，它语义不符、响应式差、动态操作麻烦。
- 影厅区域用
<div class="container"> 包住，加 <code>max-width: 1200px防止过宽 - 每排座位外层用
<div class="row g-1 mb-2">，<code>g-1控制座位间距，mb-2分隔排 - 单个座位统一用
<button type="button" class="btn btn-sm seat-btn"></button>，不依赖form提交，纯状态切换 - 座位编号建议用
data-row="A" data-col="5"这类属性存坐标，比解析文本内容更可靠 - 用
.seat-btn:not(:disabled)控制可点击态，禁用态（如通道、坏座）加disabled属性并设opacity: 0.4 - 空闲座位：背景用
#e9ecef（Bootstrap 的gray-200），文字色#495057 - 已选/锁定中：用
bg-primary+text-white，但加border: 2px solid #0d6efd强化视觉反馈 - 鼠标悬停时只改
transform: scale(1.05)，别动背景色——否则用户无法区分“悬停”和“已选” -
bootstrap-datepicker只输出日期字符串，但你需要把「2024-06-15 19:30」映射到具体场次 ID，再拉取对应座位图 JSON -
bootstrap-select渲染的是下拉菜单，没法响应“点击第 3 排第 7 座”这种坐标事件 - 正确做法：用原生
<select></select>选场次 → JS fetch 座位数据 → 动态生成.row+.seat-btn→ 绑定click事件处理选中/取消逻辑 - 记住：所有座位状态必须存在 JS 对象里（如
seats: { "A-1": "available", "A-2": "selected" }），DOM 只是视图层
seat-btn 的 CSS 状态怎么写才不冲突 Bootstrap 默认样式
Bootstrap 的 .btn 有默认背景、边框、焦点轮廓，直接覆盖容易破坏可访问性。推荐用 !important 仅限颜色和尺寸，其他靠 specificity 覆盖。
为什么直接用 bootstrap-datepicker 或 bootstrap-select 接不进选座流程
这些插件解决的是表单控件增强问题，而选座本质是二维状态矩阵的交互+校验+提交。强行套用会导致事件绑定混乱、状态不同步、移动端点选失灵。
最易被忽略的其实是座位点击的防误触逻辑——用户快速连点两下，可能触发两次 click，导致状态翻转两次。得在按钮上加 pointer-events: none 然后 setTimeout 恢复，或者用节流函数控制频率。
