我的模板Bootstrap v4.1.3相升级到Bootstrap v5.3.3需要注意的有哪些（6自定义与主题）

六、自定义与主题

1. CSS 变量（Custom Properties）
   Bootstrap 5 大量使用 CSS 变量（如--bs-primary、--bs-font-sans-serif），可直接在 CSS 中覆盖，无需重新编译 Sass：
   css

   :root {
     --bs-primary: #123456; /* 覆盖主色 */}

   
   

2. Sass 变量变化
   若通过 Sass 自定义主题，部分变量名修改：

• $enable-rounded→$border-radius（控制圆角开关及大小）

• 颜色变量整合：$theme-colors包含所有主题色（primary、secondary 等），可直接覆盖。

3. 图标库
   Bootstrap 5 不再内置任何图标库（如 Glyphicons），需手动引入第三方图标（如 Font Awesome），并替换旧图标类（如glyphicon glyphicon-search→fa fa-search）。

升级步骤建议

1. 备份项目：确保可回滚到旧版本。

2. 替换资源：引入 Bootstrap 5 的 CSS/JS 文件，移除 jQuery 和旧版 Popper.js。

3. 批量替换类名：

• 用全局替换工具将left/right相关工具类改为start/end（如.ml-→.ms-）。

• 替换data-为data-bs-（如data-toggle→data-bs-toggle）。

4. 重构组件：按上文组件变化调整表单、导航栏、输入框组等结构。

5. 改写 JS 逻辑：替换 jQuery 调用为原生 JS 实例化方式。

6. 测试与适配：重点测试响应式布局、交互组件（模态框、下拉菜单）、自定义样式。

总结