Bootstrap 5迁移需重理语义结构而非仅改class：移除jQuery依赖，废弃.panel等旧类；.col-*需适配flex布局；表单须用<label for>包裹input；JS组件需手动初始化；字体间距改用rem体系；颜色变量更新；优先采用原生语义化方案。
直接改 class 名就行，但 class 语义和结构得重理
Bootstrap 5 彻底移除了 jQuery 依赖，也废弃了大量旧 class（比如 .btn-default、.panel、.img-responsive），不是简单替换就能跑通。原生 HTML 里写个 <div class="container"> 看似能用，但若里面嵌套的是 Bootstrap 3 的 .row + .col-md-6，实际会漏掉 flex 布局支持，响应式断点行为也不一致。
常见错误现象：col- 类在小屏下不换行、btn 按钮没内边距、表单控件失去圆角和阴影——这些都不是 CSS 加载问题，而是 class 已被移除或语义变更。
- Bootstrap 3 的
.col-md-6在 v5 中仍可用，但推荐改用.col-md（自动等分）或.col-md-6+.col-lg-4（多断点显式声明） -
.text-center还在，但.center-block已废弃，改用mx-auto+display: block - 所有
.hidden-*类全部消失，改用.d-none/.d-md-block等响应式 display 控制
form 表单必须重写，label 和 input 结构不能套用老模板
Bootstrap 5 对表单的语义和样式耦合更紧：没有 <label> 包裹 <input>，或者 label 缺少 for 属性，.form-control 就不会正确对齐；而且 .form-group 不再是必需容器，反而容易干扰 flex 布局。
使用场景：迁移后台管理页的登录/编辑表单时，最常卡在这步。
立即学习“前端免费学习笔记（深入）”；
- 必须确保每个
<input>都有对应<label for="xxx">，且 id 匹配 -
.form-control仅作用于<input>、<select>、<textarea>，不再支持 div 模拟输入框 -
.form-check替代了旧版的.checkbox/.radio，内部结构必须是<input type="checkbox"><label>同级，不能嵌套 - 自定义表单控件（如 switch）需额外加
.form-switch，否则只是普通 checkbox
JavaScript 组件全换 API，data-* 属性失效是常态
所有 JS 组件（modal、tooltip、dropdown）不再响应 data-toggle、data-target 这类属性，必须用 JS 初始化，否则点击无反应——这是迁移到 Bootstrap 5 后最常被忽略的“静默失败”点。
错误现象：页面上有 <a data-toggle="modal" data-target="#xxx">，控制台没报错，但点击毫无反应。
- 必须手动引入 JS（CDN 或打包），且确保 DOM 加载完再执行初始化
- Modal 要写
const myModal = new bootstrap.Modal(document.getElementById('xxx'))，然后调myModal.show() - Tooltip 和 Popover 默认禁用，需显式启用：
const tooltip = new bootstrap.Tooltip(elem, { trigger: 'hover focus' }) - 所有事件名变更：
show.bs.modal→show.bs.modal（名字没变），但监听方式必须用myModalElement.addEventListener('show.bs.modal', ...)，不能再靠 jQuery 的$().on()
字体、间距、颜色系统要重校准，别信“看起来差不多”
Bootstrap 5 默认用 rem 基于根字体大小（1rem = 16px），而很多老 HTML 模板依赖像素值或继承混乱的 font-size。直接套用会导致按钮文字突然变小、卡片 padding 薄得像没设、primary 蓝色比预期浅一大截。
性能影响不大，但视觉一致性会被破坏，尤其在混合使用自定义 CSS 和 Bootstrap 类时。
- 检查全局
:root或html的font-size，Bootstrap 5 期望是 16px，非必要别改 - 旧模板里写的
margin: 10px得换算成mb-3（≈ 1rem）或mb-2（≈ 0.5rem），硬写 px 会脱离响应式体系 - 颜色变量变了：
primary是 #0d6efd，不是 v3 的 #337ab7；light是 #f8f9fa，不是 #f5f5f5 —— 如果覆盖了变量又没同步更新，主题就偏色 - 自定义 CSS 里用
!important强顶 spacing 或 color，大概率和 Bootstrap 5 的 utility class 冲突，优先删掉，改用官方层级（如px-4 py-2）
真正难的不是改 class，是判断哪些结构该保留、哪些该按 Bootstrap 5 的语义重写。比如一个用了十年的 tab 切换组件，与其硬套 .nav + .tab-content，不如直接用原生 <details> + CSS 实现更轻量——适配不是目的，可用、可维护才是。
