Bootstrap如何实现响应式的分步式引导表单带有动态图标进度-Bootstrap教程-PHP中文网

bootstrap官方无内置分步组件，必须用+语义结构、aria-current标记状态、css伪元素生成图标、js同步校验与焦点；硬套.progress或第三方封装会导致无障碍失效、图标与状态脱节。

bootstrap如何实现响应式的分步式引导表单带有动态图标进度

Bootstrap 官方没有内置分步引导表单组件，所谓“响应式 + 动态图标进度”，必须用 <nav></nav> + <ol></ol> 语义结构、aria-current 驱动状态、CSS 伪元素生成图标、JavaScript 同步校验与焦点——任何硬套 .progress 或第三方封装，都会让键盘导航失效、屏幕阅读器读不出“第几步”，且图标与状态脱节。

怎么搭语义结构才不被读屏软件跳过

步骤条不是装饰，是导航控件。必须用 <nav aria-label="注册流程"></nav> 包裹 <ol class="nav nav-pills"></ol>，每步是 <li class="nav-item">@#@#@#@#@#@#@#@#@#@0</li>。

aria-current="step" 是唯一被读屏软件识别的“当前步”，写成 class="active" 或 data-step="2" 都无效
href 必须指向真实锚点（如 #step-2），否则浏览器前进/后退、键盘 Tab 跳转会断掉
服务端渲染时，aria-current 必须由后端输出；若前端 JS 动态加，React/Vue hydrate 容易错位，导致“UI 显示第三步，但读屏器仍读第二步”
禁用未激活项时，用 tabindex="-1" + pointer-events: none，别用 disabled——后者会让键盘焦点直接跳过该链接

图标怎么用 CSS 生成才不破坏语义和响应式

所有图标（圆点、对勾、数字）必须用 ::before 伪元素生成，不能插 <i></i> 或 SVG，否则语义污染、小屏错位、缩放偏移。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.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 { content: "✓"; color: #198754; }、:not([aria-current])::before { content: counter(step); }（配合 counter-reset: step;）
移动端字体缩小到 font-size: 0.875rem，否则 nav-link 行高撑开，图标基线漂移
别用 position: absolute 塞图标——文字折行时图标会叠在文字上，尤其小屏

连线怎么画才不随断点拉伸变形

连接线是进度指示的核心，不能靠固定宽度或 transform: scaleX()，否则缩放、横竖切换时连线断裂或偏移。

横排时：给非末项加 border-right: 2px solid #e9ecef，再设 flex-grow: 1 让它自动填满剩余空间
竖排时（@media (max-width: 576px)）：移除 border-right，改用 border-bottom: 2px solid #e9ecef + margin-bottom: 1rem
关键过滤：只对 .nav-item:not(:last-child) .nav-link 生效，避免底部多一条线
别用 ::after 画箭头——它依赖父容器高度，文字折行后箭头位置飘移；border 方案更稳

为什么点了“下一步”图标没变、进度卡住

常见错误是只改 UI 不同步状态：JS 只调了 el.classList.add("active")，但没更新 aria-current，也没校验表单，结果“视觉走到第三步，邮箱字段还是空的”。

点击“下一步”必须先调 checkStepValidity()，失败就 input.focus() 定位第一个错误字段，别只弹 alert
校验通过后，手动设 prevLink.removeAttribute("aria-current")、nextLink.setAttribute("aria-current", "step")，再触发 scrollIntoView()
若某步含异步校验（如用户名查重），按钮要进 loading 状态：nextBtn.disabled = true + nextBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> 检查中...'
进度值不能只靠 CSS 动画模拟——真实进度必须绑定表单字段有效性，否则用户刷新页面后状态丢失