Bootstrap 5 中 data-bs-* 属性失效是设计所致的“静默降级”，非 bug；旧属性如 data-toggle 已被废弃，未更新为 data-bs-toggle 等将导致组件完全不初始化且无报错。
data-bs-* 属性失效就是“静默降级”，不是 bug 是设计
Bootstrap 5 的 data-toggle、data-target、data-dismiss 全部改成了 data-bs-toggle、data-bs-target、data-bs-dismiss。旧浏览器（包括 IE11）不识别这些属性，JS 组件压根不会初始化——按钮点不动、下拉不展开、模态框打不开，控制台却没有任何报错。
这不是兼容性缺陷，是 Bootstrap 5 主动放弃“自动 fallback”的结果。它假设：你写了 data-bs-*，就表示你明确选择了 v5；如果抄了 v4 文档还留着 data-toggle，那组件不工作就是配置错误，不是浏览器问题。
- 检查所有交互元素是否已批量替换属性名，尤其注意 Navbar 折叠按钮、Tab 切换、Tooltip 初始化点
- CDN 引入的是
bootstrap@5.x，但文档照抄 v4 官网？90% 的“功能失灵”卡在这一步 - 不要指望浏览器自动把
data-toggle映射成data-bs-toggle，它连警告都不会抛
CSS 变量（--bs-*）天然降级，但 fallback 必须手动写
Bootstrap 5 大量使用 CSS 自定义属性，比如 --bs-body-color、--bs-primary。IE11 及更早版本完全忽略 var(--bs-primary)，但如果没提供 fallback，就会退到 inherit 或浏览器默认色，导致文字看不见、按钮无背景。
例如：color: var(--bs-primary); 在 IE11 中无效；必须写成：color: #0d6efd; color: var(--bs-primary);
- 所有自定义 CSS 中用到
var(--bs-*)的地方，都得在前面补一句硬编码值 -
data-bs-theme="dark"对 IE11 无效，但它会安静地回退到浅色模式——这是 CSS 变量机制自带的优雅降级，不用 polyfill - 深色模式切换器本身依赖 JS，IE11 下这个开关不可见或不可用，但页面内容仍可读
JS 组件不兼容 IE10 及更早，IE11 需要 Babel 构建支持
Bootstrap 5 彻底移除 jQuery，全部改用 Element.closest()、Array.from()、Promise 等原生 API。IE10 不支持这些，直接报语法错误或方法不存在；IE11 支持大部分，但缺少 matches() 的部分行为、CustomEvent 构造函数等细节。
如果你必须支持 IE11：
- 构建时需配
targets: { ie: "11" }，让 Babel 转译并注入必要 polyfill（如core-js/stable） - 不能只靠
bootstrap.bundle.js，它不含运行时 polyfill，得自己加 - Safari
第三方插件（如 bootstrap-select）降级逻辑不由 Bootstrap 控制
像 bootstrap-select、bootstrap-fileinput 这类增强组件，它们的兼容策略和 Bootstrap 本体无关。比如 bootstrap-select 会在 JS 失效时通过 <noscript></noscript> 回退到原生 <select></select>，但前提是你的 HTML 结构里真写了 <noscript><select>...</select></noscript>。
常见陷阱：
- 只引入插件 JS，没补
<noscript></noscript>回退结构 → JS 加载失败时整个选择器消失 -
bootstrap-fileinput在 IE11 中禁用拖拽、跳过 WebP 预览，但若你代码里强行调用readAsDataURL处理 WebP，就会静默失败 - 所有第三方插件的“优雅降级”都是各自实现的，得单独查它们的文档，不能默认和 Bootstrap 一致
真正容易被忽略的点在于：Bootstrap 5 的降级不是“渐进式增强”的自动兜底，而是“写对才生效，写错就归零”。它把兼容责任交还给开发者——属性名、CSS fallback、构建配置、第三方插件结构，每层都得人工确认，缺一不可。
