Bootstrap如何实现响应式的分步式表单进度条指示器

Bootstrap 官方无内置分步表单组件，必须用语义化结构（<nav>+<ol>）+自定义CSS+状态同步JS实现；需用aria-current标记步骤状态、伪元素绘制连线与图标、小屏竖排适配、切换前校验表单、服务端准确输出aria-current。

Bootstrap 官方没有 .steps、.step-bar 或任何内置分步表单组件，所谓“响应式分步表单进度条”，必须用语义化结构 + 自定义 CSS + 状态同步 JS 实现。硬套 .progress 组件或第三方封装，会破坏键盘导航、读屏支持和步骤状态一致性。

用 <nav> + <ol> 搭语义化步骤结构

步骤条本质是导航控件，不是数值反馈器。必须用 <nav aria-label="表单步骤"> 包裹有序列表，每步用 <li class="nav-item">，链接用 <a> 并通过 aria-current 标记状态：

• aria-current="step" 表示当前进行中（屏幕阅读器可读，Bootstrap 5+ 推荐）
• aria-current="true" 或自定义 data-status="completed" 表示已完成（仅当需区分“完成”与“进行中”时）
• 别用 class="active"——它对辅助技术不可见，也不参与状态绑定
• 每个 <a href="#step-2"> 必须指向对应表单区域 ID，确保浏览器前进/后退和锚点跳转可用

连线与状态图标用伪元素实现，别写死宽度

连接线和状态圆点不能靠绝对定位或内联 style.width 控制，否则小屏错位、缩放偏移、动画卡顿。推荐方案：

• 连线用 .nav-item:not(:last-child) .nav-link::after + flex-grow: 1 动态撑开，避免最后一项多画一条线
• 状态图标统一用 ::before 生成圆点：.nav-link::before { content: ""; display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%; margin-right: 0.5rem; }
• 样式由属性驱动：[aria-current="step"]::before 设主色，[aria-current="true"]::before 设完成色，:not([aria-current])::before 设灰阶未激活色
• 小屏竖排时重置布局：@media (max-width: 576px) { .step-nav { flex-direction: column; gap: 1rem; } .nav-link { padding: 0.75rem 1rem; font-size: 0.875rem; } }

切换前必须同步校验，不能只改 UI

用户点“下一步”不能只加 aria-current 或改样式，否则会出现“进度走到第 3 步，但第 2 步邮箱根本没填”的逻辑断裂。真实流程必须：

• 在点击事件里调用 checkStepValidity()，而不是等最终 submit 时才校验
• 校验失败时，用 input.focus() 定位到第一个无效字段，别只弹 alert
• 禁用“下一步”按钮直到当前步通过：nextBtn.disabled = true，别只加 opacity: 0.5
• 若某步含异步校验（如用户名可用性检查），按钮需进 loading 状态，并设 disabled 防重复提交

服务端渲染时 aria-current 必须由后端准确输出

React/Vue hydrate 过程容易导致状态错位：比如 SSR 渲染出 aria-current="step" 在第 1 步，但客户端 JS 初始化后误标为第 2 步。关键点：

• 后端模板必须根据当前步骤动态输出 aria-current 属性，不能靠 JS 后补
• 客户端 JS 切换步骤时，应以 DOM 上的 aria-current 值为唯一可信源，而非内部 state 变量
• 禁用未激活项时，用 tabindex="-1" + pointer-events: none，别用 disabled——后者会砍掉键盘焦点

真正难的不是画线或变色，而是让每一步的 DOM 状态、无障碍属性、表单校验、URL 锚点、服务端输出全部严格对齐。少一个环节，键盘用户就卡住，读屏软件就报错，后端就收不到完整数据。