bootstrap 4 迁移到 bootstrap 5 的核心变动包括移除 jquery 依赖、原生支持 css 自定义属性（变量）、更新颜色系统以及弃用部分旧组件。具体做法是：替换所有基于 jquery 的插件调用为原生 javascript，使用新的 sass 变量覆盖主题色，并检查已废弃的类名如 .form-control-file。
如何移除对 jQuery 的依赖并处理插件初始化？
Bootstrap 5 不再需要 jQuery，所有插件现在都是独立的 ES6 模块或原生 JS。开发者需要将 $().modal() 等调用改为实例化 new bootstrap.Modal()，并确保在 DOM 加载完成后执行初始化逻辑。
<script src="bootstrap.bundle.min.js"></script>
<script>
const myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();
</script>
预期结果：页面加载后模态框自动显示，控制台无 jQuery 未定义错误。
立即学习“前端免费学习笔记（深入）”；
如何使用新的 CSS 变量覆盖主题颜色？
Bootstrap 5 引入了 Sass 变量系统，允许通过修改 $primary 等变量来自定义主题。开发者应在引入 Bootstrap 之前创建自定义 Sass 文件，重新定义变量值，然后编译生成新的 CSS。
// custom.scss $primary: #007bff; @import "bootstrap/scss/bootstrap";
预期结果：所有使用 .btn-primary 的按钮背景色变为指定的蓝色。
哪些常用类名在 Bootstrap 5 中被弃用或更改？
在迁移过程中，需特别注意 .form-control-file 已被移除，应直接使用 .form-control；.input-group-append 和 .input-group-prepend 被合并为 .input-group-text 配合 Flexbox 布局。这些变更旨在简化类名结构并提高响应式灵活性。
