data-bs-toggle是bootstrap 5中声明式交互的核心指令，必须与对应组件结构及属性配对使用：collapse需配data-bs-target指向.collapse元素，modal需目标含modal类和id，dropdown限于.dropdown容器内，offcanvas要求目标有offcanvas类且id不与modal冲突。
Bootstrap 5 的 data 属性 API 不是用来“写 JS”的，而是用声明式方式接管交互逻辑——只要属性写对，不写一行 JS 就能跑通折叠、模态框、下拉菜单等组件。
data-bs-toggle 是什么，哪些值必须配对使用
它不是开关按钮的通用标记，而是 Bootstrap 内部识别的“行为类型指令”。每个 data-bs-toggle 值都绑定一套预设逻辑，且必须和对应组件结构、目标属性配合才生效。
-
data-bs-toggle="collapse"必须搭配data-bs-target（指向.collapse元素）或href；若目标没加collapse类，点击无反应 -
data-bs-toggle="modal"要求目标元素有class="modal"和id，且必须在 DOM 中提前存在（不能动态插入后才触发） -
data-bs-toggle="dropdown"只对.dropdown容器内的触发器有效，且容器必须有data-bs-popper="static"或依赖 Popper.js（CDN 引入时已内置） -
data-bs-toggle="offcanvas"要求目标有class="offcanvas"，且不能和modal混用同一 ID —— 否则 JS 初始化时会冲突报错：TypeError: Cannot read properties of null
为什么 data-bs-target 写对了还是找不到元素
常见现象是点击没反应，控制台也没报错，但目标内容就是不展开/不弹出。根本原因不是路径写错，而是 DOM 结构或生命周期问题。
- 目标元素必须在页面加载完成时已存在于 DOM 中；用 JS 动态插入的
<div id="myModal"></div>，得手动调bootstrap.Modal.getOrCreateInstance()，仅靠data-bs-target无效 - ID 值必须严格匹配：
data-bs-target="#modal-1"对应<div id="modal-1">，多一个空格、大小写不一致、或用了点号（<code>.modal-1）都会失败 - 目标元素不能被
display: none或visibility: hidden隐藏在初始化前——Bootstrap 会在 ready 时扫描并绑定事件，此时不可见元素可能被跳过 - 如果用了 Webpack/Vite 等构建工具，且将 Bootstrap JS 作为模块导入（而非全局 script），需确保
bootstrap已正确初始化，否则 data 属性监听器压根没挂上 - 优点：零 JS 业务逻辑、天然支持 SSR、事件自动解绑（销毁组件时）、无障碍语义基本完备（如
aria-expanded自动同步） - 缺点：调试困难——没有 JS 入口点，出问题只能查 DOM 属性 + 控制台警告；比如
data-bs-backdrop="static"写成data-backdrop="static"（漏了bs-），浏览器完全静默忽略，不会报错 - 兼容性风险：所有 data 属性都带
bs-前缀，旧项目升级时，data-toggle会彻底失效，且无降级提示；CI 流程里若没加 HTML 检查，容易漏掉 - 定制受限：想让模态框打开时自动 focus 到第一个 input？
data-bs-focus并不存在，必须监听shown.bs.modal事件手写 JS —— 这时 data 属性就只是个触发器，兜底还得靠 JS
data 属性方案的性能与维护代价在哪
它省代码，但不省排查成本。优势明显，陷阱也藏得深。
真正麻烦的不是写错属性，而是当多个 data 属性组合生效时（比如 data-bs-toggle="collapse" + data-bs-parent + data-bs-target），其中一个失效，其他看起来“正常”，但手风琴效果崩了——这种隐性耦合，比纯 JS 更难定位。
