将 Bootstrap 从 v4.1.3 升级到 v5.3.3 需要注意多方面的变化,涵盖依赖、布局、组件、工具类、JavaScript 等核心部分。以下是详细的注意事项,按类别整理:
Bootstrap 5 在底层依赖上做了重大调整,直接影响项目的基础引入逻辑:
移除 jQuery 依赖
Bootstrap 4 依赖 jQuery 实现交互功能(如模态框、下拉菜单),而 Bootstrap 5 完全改用原生 JavaScript,不再需要引入 jQuery。
Popper.js 升级
Bootstrap 5 依赖Popper.js v2(用于下拉菜单、 tooltip 等的定位),而 Bootstrap 4 依赖 Popper.js v1。
文件引入路径与命名
Bootstrap 5 的 JS 文件命名为bootstrap.bundle.min.js(包含 Popper.js)或bootstrap.min.js(不含 Popper.js),需更新引入路径:
<!-- 旧:Bootstrap 4 --><link rel="stylesheet" href="bootstrap.min.css"><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script><!-- 新:Bootstrap 5 --><link rel="stylesheet" href="bootstrap.min.css"><script src="popper.min.js"></script> <!-- 需Popper.js v2 --><script src="bootstrap.bundle.min.js"></script> <!-- 包含Popper -->