bootstrap 3升级到4时，.btn-default、.panel、.well、.thumbnail、.col-xs-*等类名被彻底移除，.form-control-feedback改为.invalid-feedback/.valid-feedback，.text-muted权重逻辑调整，导致样式结构性缺失而非覆盖失效。
Bootstrap 3 升级到 4 时，哪些类名会直接冲突？
不是所有类都变了，但关键工具类和组件类有断裂式变更：.btn-default、.panel、.well、.thumbnail、.col-xs-* 这些在 v4 中被彻底移除；.form-control-feedback 改成 .invalid-feedback/.valid-feedback；.text-muted 语义没变但权重逻辑调整了。浏览器不会报错，但 DOM 上还留着 .btn-default，CSS 规则却没了——结果就是按钮退化成裸 <button></button> 样式。
为什么简单加 !important 或调换加载顺序不管用？
v4 的 CSS 文件里没有 .btn-default 的定义，它不是“被覆盖”，而是“根本不存在”。你把自定义 CSS 放在 v4 后面也无效，因为目标选择器已从编译产物中消失。常见错误是保留旧 HTML 模板、只换 CSS 文件，结果大量组件视觉崩坏且控制台无报错——这是结构性缺失，不是优先级问题。
- Bootstrap 4 不再支持
$screen-xs等 v3 变量，Sass 编译时若引用会直接报错Undefined variable -
.row的 margin 负值机制从-15px改为-0.5rem，栅格对齐会整体偏移 - v3 的
.hidden-xs在 v4 中对应.d-none .d-sm-block，写错一个断点类就整行消失
安全过渡的三步实操法
不追求一步到位，先让页面可运行，再逐步重构：
- 保留 v3 CSS 文件（如
bootstrap-3.4.1.min.css），用<link rel="stylesheet" href="...">加载，但加media="print"属性让它初始不生效：<link rel="stylesheet" href="bootstrap-3.4.1.min.css" media="print"> - 在 JS 初始化阶段（如
document.addEventListener('DOMContentLoaded', ...)）动态切换 media：document.querySelector('[href*="bootstrap-3"]').media = 'all'，这样 v3 样式只在需要时激活，避免全局污染 - 对必须升级的组件（如表单验证），用 class 名映射表做渐进替换：
.has-error → .was-validated .form-control:invalid，配合 JS 检测并自动补全新类，而不是靠人肉改模板
JS 组件兼容性最容易被忽略的点
Bootstrap 4 的 JS 不识别 v3 的 data 属性。比如 data-toggle="collapse" 在 v4 中仍可用，但 data-target="#myCollapse" 若指向的是 v3 风格的 ID（含下划线或大小写混用），v4 的 selector 解析器可能失败。更隐蔽的是 $.fn.modal.Constructor.VERSION 返回 "4.6.2"，但如果你项目里混用了 v3 的 bootstrap-modal.js，两个 Constructor 会共存，$('#x').modal('show') 可能随机调用任一版本——现象是模态框有时闪一下就消失，有时完全没反应。
真正要盯住的不是类名，是 JS 初始化时机和选择器解析边界。v4 默认用 querySelector，不兼容 IE8–9 的伪类写法；而 v3 的 jQuery 版本容忍度更高。升级后若发现下拉菜单、折叠面板失灵，先检查控制台有没有 Uncaught TypeError: Cannot read property 'querySelector' of null，那大概率是 DOM 元素还没挂载完就执行了 JS 初始化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
