我的模板Bootstrap v4.1.3相升级到Bootstrap v5.3.3需要注意的有哪些(1依赖与引入方式变化)

日期:2025-07-08 分类:常见问题 浏览:242 来源:新疆前沿科技技术服务有限公司


将 Bootstrap 从 v4.1.3 升级到 v5.3.3 需要注意多方面的变化,涵盖依赖、布局、组件、工具类、JavaScript 等核心部分。以下是详细的注意事项,按类别整理:

一、依赖与引入方式变化

Bootstrap 5 在底层依赖上做了重大调整,直接影响项目的基础引入逻辑:


  1. 移除 jQuery 依赖
    Bootstrap 4 依赖 jQuery 实现交互功能(如模态框、下拉菜单),而 Bootstrap 5 完全改用原生 JavaScript,不再需要引入 jQuery。
    • 若项目中自定义代码依赖 jQuery(如$(element).modal('show')),需改写为原生 JS 逻辑。

    • 移除jquery.min.js的引入,避免不必要的资源加载。

  2. Popper.js 升级
    Bootstrap 5 依赖Popper.js v2(用于下拉菜单、 tooltip 等的定位),而 Bootstrap 4 依赖 Popper.js v1。
    • 需替换旧版 Popper.js 为 v2(建议通过 CDN 或包管理工具安装:@popperjs/core)。

    • 引入顺序:先加载 Popper.js,再加载 Bootstrap 的 JS 文件。

  3. 文件引入路径与命名
    Bootstrap 5 的 JS 文件命名为bootstrap.bundle.min.js(包含 Popper.js)或bootstrap.min.js(不含 Popper.js),需更新引入路径:
    html
    预览
    <!-- 旧: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 -->



上一篇: 企业为何一定要做自己的官方网站?

下一篇: 我的模板Bootstrap v4.1.3相升级到Bootstrap v5.3.3需要注意的有哪些(2布局系统调整)

0 购物车
客服微信
咨询电话
13565752733