<p>Bootstrap 5 的 data- 属性必须使用 data-bs- 前缀，旧版 data-toggle、data-target 等无前缀属性将被完全忽略，导致模态框、下拉菜单等功能静默失效；需统一替换并避免与 jQuery 混用。</p>
Bootstrap 5 的 data-* 属性只认 data-bs-* 前缀
Bootstrap 5 的 JS 组件完全不解析旧版 data-toggle、data-target 这类无前缀属性，哪怕页面里写了也毫无作用。控制台不报错，但下拉菜单点不开、模态框点不动，八成是这个原因。
必须改用带 bs 前缀的版本：
-
data-toggle→data-bs-toggle -
data-dismiss→data-bs-dismiss -
data-trigger→data-bs-trigger -
data-offset→data-bs-offset
注意：不是所有 Bootstrap 4 的 data- 属性都保留了，比如 data-animation 在 5 中已被移除，改用 JS 初始化时传参控制。
用 data-bs-* 启动组件时，JS 不会自动监听 touchstart
这是很多人在移动端踩坑的根源——点了半天没反应，以为是 bug，其实是设计如此。Bootstrap 5 默认只响应 click 和 pointerdown，不模拟 touchstart 行为，避免 iOS Safari 的 300ms 延迟陷阱和误触问题。
如果你需要触摸即响应（比如滑动菜单、快速展开），得手动加监听：
const el = document.querySelector('[data-bs-toggle="dropdown"]');
el.addEventListener('touchstart', e => e.preventDefault(), { passive: false });
或者更稳妥的做法：改用 JS 初始化，绕过 data 属性触发链，直接调用 new bootstrap.Dropdown(el)。
data 属性 API 的核心优缺点很明确
优点就一条：零 JS 即可启用基础交互，适合静态页、CMS 输出、低代码场景。写个 <button data-bs-toggle="modal" data-bs-target="#foo"> 就能弹窗，对非前端人员友好。
缺点集中在三方面：
- 灵活性差：
data-bs-*只支持字符串值，没法传函数、对象或布尔以外的复杂配置（比如自定义popperConfig） - 调试困难：属性改了没生效？得查 DOM 是否加载完成、是否被其他脚本覆盖、是否拼写错误——没有报错，只有静默失败
- 性能隐忧：每个含
data-bs-*的元素，Bootstrap 都会在DOMContentLoaded时扫描并初始化，页面节点多时有微小开销；且无法按需懒初始化
真实项目里，越早放弃纯 data 属性、转向 JS 初始化，后期维护成本越低。尤其是需要动态控制、条件渲染、状态联动的场景，data 属性根本撑不住。
别把 data 属性当“免写 JS”捷径
很多团队迁移到 Bootstrap 5 后卡在“为什么以前好好的下拉现在不动”，最后发现是 jQuery 插件残留 + data 属性混用导致冲突。原生 JS 版本不兼容任何 jQuery 风格的调用，也不吃 $().modal('show') 这套。
正确姿势是二选一：
- 全 data 属性：确保 HTML 里全是
data-bs-*，不引入任何 jQuery，JS 文件只加载bootstrap.bundle.min.js - 全 JS 初始化：HTML 里不写 data 属性，统一用
document.querySelectorAll拿元素，再new bootstrap.Modal(...)实例化
混合使用是最容易出问题的模式——data 属性触发一次初始化，JS 再 new 一次，结果两个实例打架，事件重复绑定，状态不同步。这点在 Modal 和 Tooltip 上特别明显。
