本文详解 Bootstrap 5 选项卡组件的 HTML 结构、关键属性变更（如 data-toggle → data-bs-toggle）、必需的 JavaScript 依赖，以及 tab-pane 类名更新（fade in active → fade show active），帮助开发者快速完成从 v4 到 v5 的平滑迁移。
本文详解 bootstrap 5 选项卡组件的 html 结构、关键属性变更（如 `data-toggle` → `data-bs-toggle`）、必需的 javascript 依赖，以及 `tab-pane` 类名更新（`fade in active` → `fade show active`），帮助开发者快速完成从 v4 到 v5 的平滑迁移。
Bootstrap 5 对组件的 JavaScript 初始化方式和数据属性进行了标准化重构，其中选项卡（Tabs）是最常遇到兼容性问题的组件之一。与 Bootstrap 4 相比，主要变化有三点：
✅ *1. 数据属性前缀统一为 `data-bs-** 旧版中使用的data-toggle="tab"在 Bootstrap 5 中必须改为data-bs-toggle="tab"`。这是全局性变更——所有交互式组件（如 modal、collapse、tooltip）均遵循此规则。
✅ 2. tab-pane 类名更新
激活态面板需同时包含 fade、show 和 active 三个类：
- ❌ 错误写法：class="tab-pane fade in active"（v4 风格，in 已废弃）
- ✅ 正确写法：class="tab-pane fade show active"
show 类替代了 v4 中的 in，用于触发动画显示；fade 仍控制淡入过渡效果（若无需动画，可省略 fade 和 show，仅保留 active）。
✅ 3. 必须引入 Bootstrap JS（推荐 bundle 版本）
Bootstrap 5 完全移除了 jQuery 依赖，其 JavaScript 组件需通过原生 ES6 模块运行。因此：
- 不再加载 jQuery；
- 必须引入 bootstrap.bundle.min.js（含 Popper，无需额外引入）；
- 脚本需在 DOM 加载后执行（通常置于
