Bootstrap无原生向导组件，需用tab-pane+自定义JS实现；关键在避免状态错乱与校验遗漏：禁用默认tab切换、动态控制导航、逐字段校验、缓存结果、用disabled fieldset隔离步骤、提交前清除disabled。
Bootstrap 本身不提供原生的向导式分步表单组件，但可以用 tab-pane + nav-pills 或纯 CSS/JS 控制显隐来实现；关键不是“有没有”，而是“怎么避免状态错乱和校验漏掉”。
用 tab-pane 模拟步骤页，但必须手动接管切换逻辑
Bootstrap 的 tab 默认靠 data-bs-toggle="tab" 和 href 触发切换，但这会导致用户直接点击导航跳步、绕过校验。不能依赖默认行为。
- 把
nav-link全部设为disabled，只在 JS 中根据当前步骤和校验结果动态启用下一步按钮 - 每个
tab-pane加role="tabpanel"和aria-hidden="true/false"，确保可访问性 - 不要用
show类控制显隐——它会和 Bootstrap 的 tab JS 冲突；改用自定义类如step-active+ CSS.step-active { display: block; } - 切换时手动调用
bootstrap.Tab.getInstance(el).show()仅用于触发动画或钩子，核心状态由你自己维护（比如currentStep = 2）
form.checkValidity() 在分步中容易失效，得逐字段校验
浏览器原生的 form.checkValidity() 只检查当前显示的字段，隐藏的 input 会被忽略（即使它们 required）。一旦用户跳回上一步改了内容，再点“下一步”可能直接通过——因为上一步字段此时不可见，校验被跳过了。
- 每步提交前，先收集本步所有
input、select、textarea，调用各自的.checkValidity() - 对
type="radio"组，需取querySelectorAll('[name="xxx"]:checked').length > 0判断是否选中 - 别依赖
invalid事件自动触发提示——它只在用户交互后触发；首次点击“下一步”时，要主动调用input.reportValidity()显示原生气泡 - 把校验结果缓存到一个对象里：
stepValid[1] = true，避免重复校验
用 fieldset + disabled 隔离未激活步骤，防误操作
单纯用 display: none 隐藏步骤，里面的 input 仍能被 Tab 键聚焦、甚至被屏幕阅读器读出。更稳妥的方式是用语义化隔离。
- 每个步骤包一层
fieldset，初始时给非当前步骤的fieldset加disabled属性 -
disabled的fieldset会禁用内部所有表单控件，且天然阻止键盘聚焦和屏幕阅读器访问 - 切换步骤时，只移除上一步的
disabled，给当前步的fieldset移除该属性即可 - 注意：
disabled字段不会被form.submit()提交，所以最终提交前，要把所有fieldset的disabled清掉（或改用FormData手动收集）
最麻烦的不是怎么显示步骤，而是怎么让“上一步”按钮恢复上一步的完整状态——包括滚动位置、输入光标、文件输入值（这个根本无法还原）、以及自定义验证错误提示。这些细节没处理好，用户会觉得表单“不聪明”。
