Bootstrap 5为何弃用jQuery_纯CSS与原生JS实现组件交互性能探究

作者：袖梨 2026-07-18

<p>Bootstrap 5 彻底移除 jQuery 依赖，所有组件基于原生 DOM API 实现；必须使用 data-bs-* 属性、bootstrap.bundle.min.js，并在 DOM 就绪后手动初始化组件。</p>

Bootstrap 5 不再需要 jQuery —— 这不是“可选移除”，而是底层重写后的硬性事实。所有组件（Modal、Dropdown、Tooltip）现在完全基于原生 DOM API 和 CustomEvent 实现，引入 jQuery 不仅无用，还会白占内存、拖慢首屏解析。

data-toggle 失效？只认 data-bs-toggle

控制台没报错，但下拉菜单点不动、模态框不弹出，大概率是属性名没升级。Bootstrap 5 的 JS 完全不监听 data-toggle，只响应带 bs 前缀的版本。

必须全局搜索替换：data-toggle → data-bs-toggle，data-target → data-bs-target，data-dismiss → data-bs-dismiss
漏掉一个 data-trigger 就可能导致 Popover 初始化失败
检查元素时看到旧属性，不代表它在起作用；Bootstrap 5 的 JS 根本不会读取它们

Uncaught ReferenceError: bootstrap is not defined 怎么办

这个错误高频出现在手动调用 bootstrap.Modal.getInstance() 时，根本原因不是文件没引，而是执行时机错了。

bootstrap.bundle.min.js 必须在调用前加载并执行完毕，否则 bootstrap 全局对象不存在
初始化代码不能写在 <head> 里，也不能放在 script 标签顶部；必须包在 DOMContentLoaded 或放在 <body> 底部
使用 CDN 时，别依赖 defer 而不校验执行顺序；推荐显式加 type="module" 或用 load 事件监听

为什么 Modal.show() 会报 TypeError: $ is not a function

这是 jQuery 风格写法残留的典型症状。Bootstrap 5 彻底废弃了 $().modal('show') 这类链式调用，也不再暴露 $ 全局变量。

立即学习“前端免费学习笔记（深入）”；

正确做法是：先用 document.querySelector 获取元素，再传给 bootstrap.Modal 构造器

示例：

const myModal = new bootstrap.Modal(document.getElementById('myModal'));<br>myModal.show();

如果之前大量使用 jQuery 选择器，建议封装一层适配函数，但不要试图“模拟” jQuery 行为——性能和可维护性都会受损
Popper.js v2 配置项也变了，比如 boundary 改成 boundaryElement，不更新会导致定位偏移

移动端 touchstart 为什么没反应

Bootstrap 5 默认不监听 touchstart，只响应 click 和 pointerdown。这不是 bug，是设计取舍：它把触摸逻辑交还给开发者，避免模拟带来的兼容性陷阱。

在 iOS Safari 上，单次点击仍能触发 click（浏览器自动映射），但长按、滑动等需自行监听 touchend 并调用 toggle()

示例（让下拉支持轻点）：

const el = document.querySelector('[data-bs-toggle="dropdown"]');<br>el.addEventListener('touchend', e => {<br>  e.preventDefault();<br>  bootstrap.Dropdown.getInstance(el)?.toggle();<br>});