Bootstrap 5 的 form、card 和 tab 组件可直接搭建营销活动配置页：用 nav-tabs 拆分多步骤模块，单 form 包裹 tab-pane；input-group 处理复合输入；accordion 折叠复杂规则；避免 col 布局翻车，重视可访问性与动态 ID。
直接用 Bootstrap 5 的 form、card 和 tab 组件就能搭出可用的营销活动配置页，不需要额外框架或重写 CSS —— 关键是别把 Bootstrap 当“样式库”用，得按它的语义结构组织 DOM。
用 nav-tabs 拆分多步骤配置项
营销活动通常含「基础信息」「优惠规则」「投放渠道」「上线设置」等模块，硬塞进一个长表单会降低可维护性。Bootstrap 的 nav-tabs + tab-content 是最轻量的解法：
- 每个
tab-pane对应一个逻辑域，比如id="tab-rule"专管满减/折扣/赠品逻辑 - 必须给每个
tab-pane加role="tabpanel"和aria-labelledby，否则屏幕阅读器无法识别切换状态 - 避免在
tab-pane内嵌套form标签 —— 整个页面只用一个form包裹所有tab-pane，否则提交时数据会丢失 - 用
data-bs-toggle="tab"触发切换，不要手动操作classList，否则show/hide事件不会触发
form-control 配合 input-group 处理复合输入
营销配置里常见「满 200 减 30」「每单限用 1 张」这类带单位和约束的字段，纯 input 不够用：
- 金额类用
input-group套input-group-text（如¥或%），避免用户输错符号；type="number"要加step="0.01"支持小数 - 时间范围选
input type="datetime-local"，但注意 Safari 不支持，得 fallback 到两个date+time字段并用 JS 合并 - 「生效时段」这种多选组合，别用原生
select multiple—— 改用form-check+form-check-inline的复选框组，视觉更清晰，移动端点击热区也更大 - 所有必填字段必须加
required属性，Bootstrap 不会自动校验，得靠浏览器原生提示或 JS 补充setCustomValidity
card + accordion 折叠复杂规则区块
像「会员等级折扣梯度」「地域白名单」「设备类型限制」这些非必填但可能很长的配置项，展开就占屏、收起又难发现。Bootstrap 5 的 accordion 是现成方案：
- 每个
accordion-item包一个card，标题用accordion-button，内容用accordion-collapse - 默认只展开第一个（加
data-bs-parent="#accordion-id"），其他项设class="collapse"即可 - 别在
accordion-body里放table—— 表格宽度容易撑破卡片，改用list-group+list-group-item模拟行结构，更可控 - 折叠状态图标要用
data-bs-toggle自动切换，比如加，再用 JS 监听shown.bs.collapse事件来旋转图标
避开 col 布局在后台表单里的典型翻车点
很多人一上来就套 row + col-md-6 排两栏表单，结果在小屏上字段挤成一团、标签和输入框错位：
-
col只适合同级平铺，表单字段之间有强逻辑关系（如「开始时间」必须在「结束时间」前），建议用mb-3垂直间距 + 单列流式布局，比强行分栏更可靠 - 标签对齐别依赖
col-form-label的text-right—— 它在移动端会让文字换行，改用form-label+fw-bold加粗，靠左对齐更符合后台阅读习惯 - 表单验证提示（
invalid-feedback）必须紧跟对应input，且父容器要有was-validated类（提交后才加），否则不显示 - 如果用了
form-floating，注意它的label是覆盖在 input 上的，JS 动态赋值后要手动调用input.dispatchEvent(new Event('input'))触发 label 上浮，否则看起来像没填
最常被忽略的是：营销配置页往往要支持「复制活动」，这时所有 id 和 for 属性必须动态生成（比如加时间戳后缀），否则复制后的 radio/checkbox 会互相干扰 —— 这不是 Bootstrap 的问题，但不用心处理，上线后用户就点不准开关。
