HTML转Bootstrap5模板怎么弄？快速适配方法分享

常见错误现象：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 对表单的语义和样式耦合更紧：没有 包裹 <input>，或者 label 缺少 for 属性，.form-control 就不会正确对齐；而且 .form-group 不再是必需容器，反而容易干扰 flex 布局。

使用场景：迁移后台管理页的登录/编辑表单时，最常卡在这步。

• 必须确保每个 <input> 都有对应 ，且 id 匹配
• .form-control 仅作用于 <input>、<select>、<textarea>，不再支持 div 模拟输入框
• .form-check 替代了旧版的 .checkbox / .radio，内部结构必须是 <input type="checkbox"> 同级，不能嵌套
• 自定义表单控件（如 switch）需额外加 .form-switch，否则只是普通 checkbox

JavaScript 组件全换 API，data-* 属性失效是常态

所有 JS 组件（modal、tooltip、dropdown）不再响应 data-toggle、data-target 这类属性，必须用 JS 初始化，否则点击无反应——这是迁移到 Bootstrap 5 后最常被忽略的“静默失败”点。

错误现象：页面上有 ，控制台没报错，但点击毫无反应。

• 必须手动引入 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，不如直接用原生