当从 bootstrap 4 升级到 bootstrap 5 时，开发者可能会遇到导航栏折叠功能失效的问题。这通常是由于 bootstrap 5 对 javascript 组件的数据属性进行了命名空间调整，将 `data-toggle` 和 `data-target` 替换为 `data-bs-toggle` 和 `data-bs-target`。本文将详细解释这一变化，并提供正确的代码示例，帮助您顺利迁移并修复导航栏折叠功能。
问题概述
在 Bootstrap 5 中，一些核心 javaScript 组件的数据属性（data attributes）发生了变化，以避免与其他前端库可能存在的命名冲突。其中，导航栏（Navbar）的折叠（Collapse）功能是受影响最明显的组件之一。如果您的代码仍然沿用 Bootstrap 4 的 data-toggle=”collapse” 和 data-target=”#id” 属性，那么在 Bootstrap 5 环境下，导航栏的切换按钮将无法正常工作，点击后导航菜单不会展开或收起。
Bootstrap 5 数据属性新规
Bootstrap 5 引入了带有 bs 前缀的数据属性，例如 data-bs-toggle 和 data-bs-target。这一改变旨在为 Bootstrap 的 javascript 功能提供明确的命名空间，减少与其他库（如 jquery ui 或其他自定义脚本）发生冲突的可能性。因此，所有依赖这些数据属性的组件，包括导航栏、模态框、折叠面板等，都需要进行相应的更新。
解决方案与示例
要解决 Bootstrap 5 导航栏折叠失效的问题，只需将导航栏切换按钮（navbar-toggler）上的两个关键数据属性进行更新：
- 将 data-toggle=”collapse” 更改为 data-bs-toggle=”collapse”。
- 将 data-target=”#navbarNavAltMarkup” 更改为 data-bs-target=”#navbarNavAltMarkup”。
以下是一个修正后的 Bootstrap 5 导航栏示例代码：
<!doctype html> <html lang="sr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=false, initial-scale=1"> <link rel="icon" href="{{ url_for('static', path='/images/favicon.png') }}" sizes="32x32" /> <!-- Bootstrap css --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <title>Navbar Test</title> </head> <body> <!-- 推荐使用 Bootstrap Bundle，因为它包含了 Popper.js --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- 关键修改：data-bs-toggle 和 data-bs-target --> <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="/">Home</a> <a class="nav-item nav-link" href="/link1">Link 1</a> <a class="nav-item nav-link" href="/link2">Link 2</a> <div class="dropdown"> <a class="nav-item nav-link dropdown-toggle" href="#" role="button" id="dropdownMenuReports" data-bs-toggle="dropdown" aria-expanded="false"> Reports </a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuReports"> <li><a class="dropdown-item" href="/reports/reminders">Reminders - Send</a></li> <li><a class="dropdown-item" href="/reports/reminders?render_only">Reminders - Display Only</a></li> </ul> </div> </div> </div> </nav> </div> </body> </html>在上述代码中，我们移除了 jQuery 和 Popper.js 的单独引入，而是直接使用了 Bootstrap 5 提供的 bootstrap.bundle.min.js。这个文件已经包含了所有 Bootstrap JavaScript 组件及其依赖（包括 Popper.js），是推荐的引入方式，可以简化管理并确保兼容性。
注意事项
- 完整引入 Bootstrap 5 JS： 确保您引入的是 bootstrap.bundle.min.js。这个文件包含了所有 Bootstrap JavaScript 插件及其依赖（如 Popper.js），是推荐的引入方式。如果只引入 bootstrap.min.js，可能需要单独引入 Popper.js。
- CDN 链接更新： 确保您使用的 Bootstrap CSS 和 JS 的 CDN 链接是针对 Bootstrap 5 版本的。示例中已更新为 bootstrap@5.3.0。
- 其他组件： 除了导航栏，其他使用 data-toggle 和 data-target 的组件，如模态框（Modal）、折叠面板（Collapse）、选项卡（Tab）等，也需要进行类似的 data-bs-* 属性更新。
- 官方文档： 在进行版本迁移时，始终建议查阅 Bootstrap 官方文档的迁移指南，以获取最全面和最新的变动信息。
总结
Bootstrap 5 对数据属性命名空间的调整是其架构演进的一部分，旨在提升兼容性和可维护性。对于导航栏折叠功能失效的问题，核心在于将 data-toggle 和 data-target 更新为 data-bs-toggle 和 data-bs-target。通过理解并应用这些变化，您可以确保您的 Bootstrap 5 项目中的交互组件能够正常工作，从而顺利完成从旧版本到新版本的升级。