Bootstrap 5 彻底移除 jQuery 依赖，JS 插件必须用原生 DOM 操作和 ES6 类（如 bootstrap.Modal）显式初始化，支持 data-bs-* 自动初始化或 ESM 按需导入，但要求 bootstrap.bundle.min.js 加载完成、DOM 就绪、属性前缀正确且元素存在。
Bootstrap 5 的 JavaScript 插件不再依赖 jQuery，调用方式从 $().modal() 这类链式调用，彻底转向原生 DOM 操作 + ES6 类实例化。如果你在控制台看到 ReferenceError: $ is not defined 或者 modal is not a function，基本可以确定你正处在纯原生 JS 环境下，且没走对初始化路径。
data-bs-* 属性自动初始化（适合静态页面）
这是最轻量、无需写 JS 就能用上模态框、下拉菜单等组件的方式，但只对初始就存在于 DOM 中的元素生效。
- 必须引入
bootstrap.bundle.min.js（含 Popper），不能只引bootstrap.min.js - 属性前缀必须是
data-bs-，比如data-bs-toggle="modal"，旧的data-toggle会静默失效 - 目标元素 ID 必须匹配
data-bs-target值，且容器要有.modal、.dropdown-menu等对应类名 - 动态插入的 HTML（如通过
innerHTML或fetch加载）不会被自动扫描，得手动初始化
ES 模块按需导入并 new 实例（推荐用于现代构建项目）
Webpack/Vite 等打包器下，直接 import 组件类比全局 script 更可控，也利于 tree-shaking。
- 确保已安装
@popperjs/core和bootstrap@^5.3.0，低版本可能缺少bootstrap.esm.js - 导入语句要写全：例如
import { Modal, Tooltip } from 'bootstrap';，不是import bootstrap from 'bootstrap' - 构造函数参数必须是真实 DOM 元素，
document.getElementById('xxx')返回null时会报错，建议加判断 - 事件监听需显式绑定：
myModal.addEventListener('shown.bs.modal', () => {...})，事件名带bs.命名空间
手动调用 Bootstrap 对象方法（兼容旧代码迁移）
如果你沿用 Bootstrap 4 的思路，想保留类似 bootstrap.Modal.getInstance(el) 这种写法，它依然可用，但前提是全局 bootstrap 对象存在。
立即学习“Java免费学习笔记（深入）”；
- 引入
bootstrap.bundle.min.js后，全局会挂载window.bootstrap，提供Modal、Dropdown等类和getInstance工具方法 -
bootstrap.Modal.getOrCreateInstance(el, options)可避免重复初始化，比直接new Modal(el)更安全 -
bootstrap.Toast等组件不支持 data 属性自动触发，必须手动new或用getOrCreateInstance - 注意：该对象仅在 script 标签引入模式下存在；ESM 导入后，
window.bootstrap不会出现
常见错误：popover / tooltip 不显示或闪退
这类组件高度依赖 Popper 定位引擎，原生 JS 下出问题大概率不是逻辑错，而是配置或时机问题。
- 必须确保触发元素存在且已挂载到 DOM，
DOMContentLoaded后再初始化，或用document.addEventListener('DOMContentLoaded', ...) -
data-bs-trigger="hover focus"在触摸设备上可能异常，建议生产环境统一用click - 内容为空（
data-bs-content=""或title=""）会导致初始化失败，控制台可能无提示 - 若用
new Tooltip(el)，el必须是原生元素，不能是 jQuery 对象或字符串选择器
最易被忽略的一点：Bootstrap 5 的所有 JS 组件都默认启用 CSS 过渡（transition），如果自定义样式里写了 transition: none 或重置了 opacity/transform，动画会卡住甚至功能异常——这不是 JS 错误，但会让调试陷入僵局。
