bootstrap 5需按设计稿重定义断点、字体、表单样式及工具类行为，兼容ie11须降级至v4.6并配置autoprefixer，高保真关键在精准匹配设计约束与浏览器/js实际表现。
Bootstrap 5 的 class 命名和响应式断点怎么对应设计稿？
高保真原型不是“套个 Bootstrap 就完事”，关键在让 class 行为跟设计稿的栅格、间距、字体层级严丝合缝。Bootstrap 5 默认的 sm/md/lg/xl/xxl 断点（如 md 是 ≥768px）常和设计稿里的「平板窄屏」「桌面宽屏」不一致，硬套会导致在目标设备上错位。
实操建议：
- 先用 Figma 或 Sketch 量出设计稿中各设备宽度临界值（比如 iPad 竖屏是 768px，但客户要求「740px 就切布局」），再在
_variables.scss中重定义$grid-breakpoints，例如把md改成740px - 避免滥用
col-6 col-md-4 col-lg-3这类组合——它依赖默认断点，一旦改了变量，所有地方都要复查；更稳妥的是统一用col+flex工具类（如d-flex flex-wrap）配合自定义 CSS 变量控制间隙 - 设计稿若用了非标准字体大小（如 19px 标题），别硬凑
fs-5（默认 1.25rem=20px），直接写style="font-size: 19px"或新增.fs-19 { font-size: 19px !important; }
表单控件如何做到「看起来像设计稿」又保留 Bootstrap 的 JS 行为？
Bootstrap 的 form-control 默认有圆角、阴影、边框粗细和 focus 状态动画，但设计稿往往要求无阴影、1px 边框、focus 仅变色不加 box-shadow——改样式容易，但一删 box-shadow，form-control:focus 的 JS 验证反馈（如 is-invalid）就可能失效或视觉脱节。
实操建议：
- 覆盖时只动必要属性：
.form-control { border-radius: 2px; box-shadow: none; border: 1px solid #ced4da; }，保留outline: 0和transition，否则:focus切换会卡顿 -
is-invalid类默认加红边+图标，如果设计稿只要文字提示（如下方invalid-feedback），就给.form-control.is-invalid加border-color: #6c757d !important;，避免红色边框抢戏 - 日期/上传等原生控件样式不可控，用
form-control-file或第三方库（如 flatpickr）替代，但注意它们不自动响应disabled或required属性，得手动绑定
用 Bootstrap 的 utility class 写复杂布局时，哪些 class 组合会悄悄破坏原型交互？
高保真原型要模拟真实点击、悬停、展开行为，但像 d-none d-md-block、visually-hidden、sr-only 这些工具类，看似只是显隐，实际会影响可访问性（a11y）测试结果和 JS 事件绑定——比如 d-none 让元素脱离渲染流，addEventListener 绑上去也没用；visually-hidden 虽保留 DOM，但屏幕阅读器仍会读，而设计稿里这个区域明明是“完全隐藏”。
实操建议：
- 需要 JS 控制显隐的区域，别用
d-none，改用opacity: 0; pointer-events: none;+ 自定义 class，这样元素还在文档流里，事件监听器有效 - 模态框内容如果用
fade show动画，注意show是 Bootstrap JS 加的 class，原型里没引入bootstrap.bundle.js就不会触发；要么补 JS，要么直接写opacity: 1; visibility: visible; -
text-truncate在窄容器里强制省略号，但设计稿可能要求「超长文本换行」，此时必须加white-space: normal;覆盖，否则文案截断后和文案评审对不上
为什么原型在 Chrome 里正常，到客户给的 IE11 截图里全乱了？
Bootstrap 5 官方已放弃 IE11 支持，但很多客户内部系统仍在用 IE11 查看原型链接。这时 flex 布局错位、gap 属性失效、aspect-ratio 报错都是表象，根因是 Bootstrap 5 的 CSS 输出默认不带旧版 Flexbox 前缀，且部分 utility class（如 bg-gradient）依赖 linear-gradient() 的现代语法。
实操建议：
- 如果必须兼容 IE11，回退到 Bootstrap 4.6（最后支持 IE11 的版本），并确认构建流程里启用了 Autoprefixer，target 配置含
"ie >= 11" - 禁用所有 Bootstrap 5 特有功能：删掉
container-fluid px-0里的px-0（IE11 不认负 margin），改用mx-0；避免vh-100（IE11 的 vh 在地址栏展开时会跳变），用min-vh-100 - 客户截图用的是 IE11 的「企业模式」？那连 Autoprefixer 都救不了——得手动加
@supports not (display: flex) { ... }降级方案，或者干脆告诉客户：“原型需在 Chrome/Firefox 查看，IE11 仅用于基础结构验证”
高保真原型最耗神的地方，从来不是写多少 class，而是每个 class 后面藏着的浏览器行为、JS 生命周期、设计系统约束——这些没法靠「复制粘贴示例代码」绕过去。你改一个 gap，可能要同步检查三处 JS 逻辑是否还拿得到正确 offsetHeight。
