Bootstrap官方无内置分步组件，必须用语义化<nav>+<ol>结构、aria-current标记状态、伪元素生成图标与连线，并同步表单校验和焦点管理。
Bootstrap 官方没有 .steps、.step-bar 或任何内置分步进度条组件，所谓“响应式 + 文字 + 图标”的进度条，必须用语义化结构（<nav>+<ol>）+ 属性驱动 CSS + 状态同步 JS 实现。硬套 .progress 或第三方封装，会破坏键盘导航、屏幕阅读器识别和表单联动逻辑。
用 <nav>+<ol> 搭语义化结构，别用 <div> 堆砌
步骤条本质是导航控件，不是数值反馈器。必须用 <nav aria-label="表单步骤"> 包裹有序列表，每步为 <li class="nav-item"><a class="nav-link" href="#step-2" aria-current="step">填写信息</a></li>：
-
aria-current="step"是唯一被屏幕阅读器识别的“当前步”方式；class="active"对读屏软件不可读，也不参与状态绑定 - 每项
href必须指向对应表单锚点（如#step-2），支持浏览器前进/后退和锚点跳转 - 服务端渲染时，确保
aria-current由后端准确输出；否则 React/Vue hydrate 易错位 - 禁用未激活项时，用
tabindex="-1"+pointer-events: none，而不是disabled——后者会砍掉键盘焦点
文字和图标都用 ::before 生成，不插额外 DOM
图标（圆点、对勾、数字）和步骤文字必须通过 CSS 伪元素统一控制，避免污染语义结构：
- 统一定义
.nav-link::before：设display: inline-block、width: 1.25rem、height: 1.25rem、border-radius: 50%、margin-right: 0.5rem、vertical-align: middle - 状态样式由属性驱动：
[aria-current="step"]::before { background-color: #0d6efd; }、[aria-current="true"]::before { background-color: #198754; }、:not([aria-current])::before { background-color: #adb5bd; } - 文字编号用
counter()：.step-nav { counter-reset: step; }，再配:not([aria-current])::before { content: counter(step); counter-increment: step; } - 移动端字体建议降到
font-size: 0.875rem，防止.nav-link高度撑开导致行距失衡
连线靠 flex-grow + border-right，别用固定宽度或 transform
连接线随步骤推进动态延伸，纯 CSS 实现最稳：
- 横排时：给非末项的
.nav-link加border-right: 2px solid #e9ecef，再设flex-grow: 1让连线自动填满剩余空间 - 竖排时（
@media (max-width: 576px)）：移除border-right，改用border-bottom+margin-bottom: 1rem - 只在非最后一项画线：
.nav-item:not(:last-child) .nav-link::after，避免底部多一条线 - 小屏下重置
gap和padding：.step-nav { gap: 1rem; }，别依赖gap-3这类工具类——flex column下对齐不稳定
切换前必须校验，不能只改 UI
用户点“下一步”不能只加 aria-current 或改样式，否则会出现“进度走到第 3 步，但第 2 步邮箱根本没填”的逻辑断裂：
- 在点击事件里调用
checkStepValidity()，而不是等最终submit时才校验 - 校验失败时，用
input.focus()定位到第一个无效字段，别只弹alert - 禁用“下一步”按钮直到当前步通过：
nextBtn.disabled = true，别只加opacity: 0.5 - 若某步含异步校验（如用户名可用性检查），按钮需进
loading状态，并设disabled防重复提交
真正难的不是画出连线或换图标，而是让 aria-current 与表单校验、焦点管理、服务端输出三者严格同步——漏掉任意一环，都会导致可访问性失效或用户操作脱节。
