Bootstrap v3 到 v4 的核心断层在于布局逻辑与构建体系的彻底切换：栅格系统从 float 全面转向 flexbox，单位由 px 主导改为 rem 为主，响应式工具类从 hidden-xs 等隐式命名废弃，转为 d-none d-sm-block 等显式控制类。
Bootstrap v3 到 v4 的核心断层在哪
v4 不是 v3 的“升级”，而是布局逻辑和构建体系的切换。最直观的是栅格系统从 float 彻底转向 flexbox：v3 里靠 col-xs-6 col-sm-pull-6 搞左右换位，v4 改用 order- 类和 flex-direction 控制；单位也从全 px 迁移到以 rem 为主（margin/padding 仍保留部分 px）；hidden-xs 这类响应式工具类被废弃，改用 d-none d-sm-block 这种显式控制显示/隐藏状态的组合——它要求你明确声明“在 sm 及以上显示”，否则默认不渲染。
v4 到 v5 的 JavaScript 层面发生了什么
v5 移除了全部 jQuery 依赖，不是简单地“不推荐用”，而是源码级重写：js/src/modal.js 等所有插件都基于原生 EventTarget 和 CustomEvent 实现。这意味着：
- 旧项目中直接调用
$().modal('show') 会报 TypeError: $ is not a function
- 自定义事件名虽保留了命名空间（如
show.bs.modal），但事件对象结构变了，比如 event.relatedTarget 在 v4 中可能为空，v5 中才稳定提供
-
data-toggle 仍可用，但内部不再走 jQuery 事件委托，而是用 addEventListener 直绑
为什么 v3 仍被部分老项目坚持使用
不是因为“更稳定”，而是兼容成本真实存在：
- v3 的
col-xs- 栅格断点（col-（
- v3 的 CSS 文件体积小、无 CSS 变量、无
prefers-reduced-motion 等现代特性，对低配终端或内网老旧浏览器更友好
- 大量遗留组件封装（如基于
$.fn.tab 的 tab 切换增强）无法平滑迁移，重写成本高于维护
注意：bootstrap@3 已于 2022 年 1 月停止官方维护，安全补丁不再发布。
v5 的 Sass 配置和 v4 有哪些实际差异
v5 的 _variables.scss 增加了更多可覆盖变量，但关键变化是默认启用 CSS 自定义属性（CSS Custom Properties）：
- v4 中
$enable-css-vars 默认为 false，v5 改为 true，导致编译后 CSS 里大量出现 var(--bs-primary)
- v5 移除了
$enable-flex 开关——v4 中还能靠它一键退回到 float 布局，v5 彻底放弃该回退路径
- v5 的
breakpoint-min() 函数行为变更：v4 返回带单位值（如 576px），v5 返回纯数字（576），影响自定义媒体查询写法
如果你用 Sass 编译器（如 Dart Sass 1.70+），还需注意 v5 要求 @use 替代 @import，否则会警告并最终报错。
v5 的 CSS 变量和 flex-only 布局看似只是“更现代”，但实际会影响你调试样式时的取值路径、审查元素看到的计算值，以及是否能用 JS 动态修改主题色——这些细节在迁移时最容易被跳过。
js/src/modal.js 等所有插件都基于原生 EventTarget 和 CustomEvent 实现。这意味着：
- 旧项目中直接调用
$().modal('show')会报TypeError: $ is not a function - 自定义事件名虽保留了命名空间（如
show.bs.modal），但事件对象结构变了，比如event.relatedTarget在 v4 中可能为空，v5 中才稳定提供 -
data-toggle仍可用，但内部不再走 jQuery 事件委托，而是用addEventListener直绑
为什么 v3 仍被部分老项目坚持使用
不是因为“更稳定”，而是兼容成本真实存在：
- v3 的
col-xs- 栅格断点（col-（
- v3 的 CSS 文件体积小、无 CSS 变量、无
prefers-reduced-motion 等现代特性，对低配终端或内网老旧浏览器更友好
- 大量遗留组件封装（如基于
$.fn.tab 的 tab 切换增强）无法平滑迁移，重写成本高于维护
注意：bootstrap@3 已于 2022 年 1 月停止官方维护，安全补丁不再发布。
v5 的 Sass 配置和 v4 有哪些实际差异
v5 的 _variables.scss 增加了更多可覆盖变量，但关键变化是默认启用 CSS 自定义属性（CSS Custom Properties）：
- v4 中
$enable-css-vars 默认为 false，v5 改为 true，导致编译后 CSS 里大量出现 var(--bs-primary)
- v5 移除了
$enable-flex 开关——v4 中还能靠它一键退回到 float 布局，v5 彻底放弃该回退路径
- v5 的
breakpoint-min() 函数行为变更：v4 返回带单位值（如 576px），v5 返回纯数字（576），影响自定义媒体查询写法
如果你用 Sass 编译器（如 Dart Sass 1.70+），还需注意 v5 要求 @use 替代 @import，否则会警告并最终报错。
v5 的 CSS 变量和 flex-only 布局看似只是“更现代”，但实际会影响你调试样式时的取值路径、审查元素看到的计算值，以及是否能用 JS 动态修改主题色——这些细节在迁移时最容易被跳过。
col-xs- 栅格断点（col-（
prefers-reduced-motion 等现代特性，对低配终端或内网老旧浏览器更友好$.fn.tab 的 tab 切换增强）无法平滑迁移，重写成本高于维护_variables.scss 增加了更多可覆盖变量，但关键变化是默认启用 CSS 自定义属性（CSS Custom Properties）：
- v4 中
$enable-css-vars默认为false，v5 改为true，导致编译后 CSS 里大量出现var(--bs-primary) - v5 移除了
$enable-flex开关——v4 中还能靠它一键退回到float布局，v5 彻底放弃该回退路径 - v5 的
breakpoint-min()函数行为变更：v4 返回带单位值（如576px），v5 返回纯数字（576），影响自定义媒体查询写法
@use 替代 @import，否则会警告并最终报错。
v5 的 CSS 变量和 flex-only 布局看似只是“更现代”，但实际会影响你调试样式时的取值路径、审查元素看到的计算值，以及是否能用 JS 动态修改主题色——这些细节在迁移时最容易被跳过。
