Bootstrap 的 data-* 属性可实现模态框、折叠、下拉、标签页、提示框等基础交互，但需引入 JS 文件且依赖 DOM 就绪；tooltip/popover 需手动初始化，多区域联动需用 data-bs-target 同类选择器或 data-bs-parent 实现手风琴效果；动态内容仍须 JS。
Bootstrap 的 data-* 属性能做什么交互
Bootstrap 本身不依赖 jQuery（v5+ 已移除），但它的 JS 组件仍需加载对应的 JavaScript 文件才能运行。所谓“不写 JS 只用 Bootstrap 实现交互”，实际是指不手写 JS 逻辑，只靠 Bootstrap 提供的 data 属性 + 官方 JS 插件触发行为——前提是你的项目已引入了 Bootstrap 的 JS bundle（如 bootstrap.bundle.min.js）。
它能做的交互有限但够用：模态框开关、折叠展开、下拉菜单、标签页切换、提示框（tooltip）、弹出框（popover）。这些都通过 data-bs-toggle 等属性驱动，无需一行自定义 JS。
-
data-bs-toggle="modal"配合data-bs-target="#id"打开模态框 -
data-bs-toggle="collapse"控制折叠组件，目标需有id或data-bs-target -
data-bs-toggle="dropdown"必须放在触发按钮上，且父容器要有dropdown类 - tooltip/popover 需要手动初始化（即必须写 JS），所以“纯 data 属性”方式在这里行不通
为什么点了没反应？常见断点检查清单
很多“不写 JS 却失效”的问题，其实卡在基础链路上。Bootstrap 的 data 属性不是魔法，它依赖 JS 运行时扫描并绑定事件。
典型静默失败场景：
- 只引入了 CSS 文件（
bootstrap.min.css），但没引入 JS（bootstrap.bundle.min.js）——这是最常见原因 - JS 引入顺序错：Bootstrap JS 必须在 Popper.js（已打包进 bundle）和 jQuery（v5 不需要）之后——但 v5 的 bundle 已内置 Popper，所以只需确保它在任何自定义 JS 之前加载
- 元素 DOM 加载完成前就尝试触发（比如把 button 放在
里）——data 属性机制依赖 DOM ready 后的自动初始化 - 用了旧版 HTML 写法，比如
data-toggle（v4）而项目是 v5，必须改成data-bs-toggle
折叠（Collapse）不用 JS 怎么控制多个区域联动
原生 Collapse 组件默认是独立工作的。如果想点一个按钮同时收起 A、展开 B，纯 data 属性做不到——data-bs-target 只接受单个选择器（支持 CSS 选择器语法，但不支持多目标分隔）。
可行折中方案：
- 用同一个
data-bs-target指向多个元素：例如data-bs-target=".section-collapse"，然后给所有要联动的区域加class="section-collapse collapse"——它们会同步展开/收起 - 若需“互斥”（A 展开则 B 收起），得借助
data-bs-parent，指向一个公共父容器，并给每个 collapse 区域加class="collapse"和唯一id——这是 Bootstrap 内置的手风琴逻辑，无需额外 JS - 注意：
data-bs-parent值必须是有效的 CSS 选择器（如#accordion），且父容器需存在，否则互斥失效
模态框传参或动态内容还能靠 data 属性吗
不能。data-bs-* 属性只能传递静态值，比如 data-bs-whatever="hello"，但无法在打开前动态注入 HTML 或绑定事件。
例如你想点击不同卡片打开同一模态框，但标题和内容随卡片变化——这时候 data 属性顶多传个 ID，真正取数据、填内容，必须写 JS。
- 可以保留
data-bs-toggle="modal"触发打开动作，但后续内容填充得监听show.bs.modal事件来处理 - 如果完全拒绝写 JS，唯一办法是为每种内容预设一个完整模态框 DOM，再用不同
data-bs-target指向它们——页面体积大、维护成本高 - v5 的 Modal 构造函数支持
new bootstrap.Modal(...)显式控制，但这显然属于“写 JS”范畴
Bootstrap 的 data 属性是快捷入口，不是交互替代方案。一旦需求超出开关、显隐、简单切换，就必须直面 JS——这不是限制，而是设计使然。
