Bootstrap 5彻底移除jQuery依赖，改用原生JavaScript实现所有组件，并新增xxl断点（≥1400px），共6个断点；而Bootstrap 4需依赖jQuery和Popper.js，仅5个断点且无xxl。
Bootstrap版本差异必须说清 jQuery 依赖和断点变化
面试官问“用过 Bootstrap 吗”，光说“用过”等于没答。关键要立刻点出你用的是哪个版本，以及它和旧版的本质区别。Bootstrap 5 移除了 jQuery 依赖，所有组件（比如 Modal、Dropdown）都改用原生 JavaScript 实现；而 Bootstrap 4 及之前必须引入 jQuery 和 Popper.js，否则 Tooltip 或 Dropdown 直接不工作。
断点也变了：Bootstrap 5 新增了 xxl（≥1400px），共 6 个断点；Bootstrap 4 是 5 个（无 xxl）。如果你写过 .col-xxl-3 却没说明版本，面试官会默认你混淆了文档。
常见错误现象：
- 在 Bootstrap 5 项目里还写
$(".modal").modal("show")—— 这会报TypeError: $ is not a function - 用
.col-sm-6 .col-md-4布局，在小屏上错位 —— 忘了 Bootstrap 5 默认移动端优先，.col-（无前缀）等价于.col-xs-，但 Bootstrap 4 已弃用xs前缀，直接用.col-
栅格系统回答要带具体使用约束
别只背“12 列”“响应式”。面试官想听你踩过坑——比如为什么 .row 一定要包在 .container 里？因为 .container 提供水平居中和 padding，而 .row 的 margin 是负值（margin: 0 -15px），用来抵消子元素 .col-* 的左右 padding（各 15px）。如果把 .row 直接扔在 里，左右会溢出 15px。
列间隙固定是 30px（每列左右各 15px），这个值由 --bs-gutter-x CSS 变量控制，Bootstrap 5.3 支持运行时修改，但改完要同步重置 .row 的负 margin，否则视觉错位。
实操建议：
- 写布局时先确认容器类型：
.container（定宽居中） vs.container-fluid（100% 宽） - 避免嵌套
.row内再放.container—— 会造成 padding 堆叠，内容被挤窄 - 要用自动等分，优先写
.col（无数字后缀），而不是硬算.col-4×3；前者靠 Flex 自动均分，后者在不同断点下容易崩
模态框叠加问题不能只说“加 z-index”
遇到“怎么实现两个模态框叠加显示”，很多人脱口而出“调高 z-index”。但 Bootstrap 5 的 Modal 默认 z-index 是 1055，遮罩层（.modal-backdrop）是 1050。如果只是手动给第二个 .modal 设 style="z-index: 1060"，遮罩层不会跟着升，导致点击空白处关闭的是底层模态框。
真正可靠的解法是监听事件并动态管理：
- 用
shown.bs.modal钩子，遍历当前所有.modal.show，按 DOM 顺序递增z-index - 同时把每个模态框对应的
.modal-backdrop的z-index设为modal.zIndex - 5 - 确保最后一个显示的模态框获得焦点：
event.target.focus()
注意：不要修改 bootstrap.js 源码。面试中提“改源码”会被认为工程素养不足——Bootstrap 5 提供了 Modal 构造函数和事件 API，完全够用。
自定义样式必须区分 Sass 变量和 CSS 变量场景
当被问“怎么定制主题色”，不能只说“改变量”。要说明路径和生效时机：
如果是构建时定制（如公司统一主题），在导入 Bootstrap 前覆盖 Sass 变量：$primary: #2a58a2，然后编译；变量文件路径是 scss/_variables.scss，暗色模式变量在 scss/_variables-dark.scss。
如果是运行时换肤（如用户切换亮/暗模式），必须用 CSS 变量：--bs-primary、--bs-body-color 等。这些变量在 Bootstrap 5.3 中已全面支持，但要注意：不是所有类都响应 CSS 变量，比如 .btn-primary 会读 --bs-primary，但 .bg-primary 仍依赖 Sass 编译时生成的类名。
容易被忽略的点：CSS 变量修改后，需手动触发重绘（如 getComputedStyle 读一次），否则部分浏览器可能不立即更新背景色或边框色。
