本文详细介绍了从bootstrap 4迁移到bootstrap 5时，导航栏折叠功能失效的常见原因及解决方案。核心在于bootstrap 5将数据属性前缀从`data-`更改为`data-bs-`。教程提供了具体的代码示例，帮助开发者正确配置导航栏的`data-bs-toggle`和`data-bs-target`属性，确保折叠功能正常运作，并强调了版本兼容性和脚本引入的重要性。
在开发Web应用时，导航栏（Navbar）的折叠功能是响应式设计中不可或缺的一部分，尤其是在移动设备上。Bootstrap框架提供了便捷的组件来实现这一功能。然而，从Bootstrap 4升级到Bootstrap 5时，开发者可能会遇到导航栏折叠按钮失效的问题。这通常是由于Bootstrap版本之间数据属性（data attributes）的命名约定发生了变化。
Bootstrap 4与Bootstrap 5数据属性的关键差异
Bootstrap 5为了避免与第三方库（如jQuery UI）的data属性命名冲突，并更好地遵循HTML Living Standard，将其自定义数据属性的前缀从data-统一更改为data-bs-。这意味着所有用于控制JavaScript行为的HTML属性都需要进行相应的更新。
对于导航栏折叠功能，主要涉及以下两个属性：
- data-toggle: 在Bootstrap 4中，这个属性用于指定触发的JavaScript行为类型，例如data-toggle="collapse"表示触发折叠功能。
- data-target: 在Bootstrap 4中，这个属性用于指定要操作的目标元素的ID，例如data-target="#navbarNavAltMarkup"表示操作ID为navbarNavAltMarkup的元素。
在Bootstrap 5中，这两个属性必须更新为：
- data-bs-toggle: 对应Bootstrap 4的data-toggle。
- data-bs-target: 对应Bootstrap 4的data-target。
如果您的代码仍然使用Bootstrap 4的data-toggle和data-target属性，但在页面中引入的是Bootstrap 5的JavaScript文件，那么折叠功能将无法正常工作。
正确配置Bootstrap 5导航栏折叠
要解决导航栏折叠失效的问题，只需将HTML中触发按钮上的data-toggle和data-target属性替换为data-bs-toggle和data-bs-target。
以下是修改前（Bootstrap 4风格）和修改后（Bootstrap 5风格）的代码对比：
Bootstrap 4 风格 (失效于Bootstrap 5):
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>Bootstrap 5 风格 (正确):
<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>请注意，navbar-collapse类所在的div元素的id属性（例如id="navbarNavAltMarkup"）保持不变，因为它只是一个标识符，不受数据属性前缀变化的影响。
完整示例代码
以下是一个完整的Bootstrap 5导航栏示例，其中包含了正确的data-bs-toggle和data-bs-target属性，确保折叠功能正常运作：
<!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.2.2/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.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- 如果您需要jQuery，可以引入，但Bootstrap 5不再依赖jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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>注意事项：
- Bootstrap版本一致性: 确保您引入的CSS和JavaScript文件都属于Bootstrap 5版本。混合使用不同版本的资源是常见的问题来源。
- JavaScript引入: Bootstrap 5的JavaScript组件（包括导航栏折叠）不再依赖jQuery。推荐引入bootstrap.bundle.min.js，它包含了Bootstrap的JavaScript插件及其所需的Popper.js库。如果您仍然需要jQuery用于其他目的，可以继续引入，但它不是Bootstrap 5组件运行的必要条件。
- 其他组件: 除了导航栏，其他Bootstrap组件如模态框（Modal）、下拉菜单（Dropdown）等也遵循相同的data-bs-前缀命名规则。在迁移过程中，请务必检查并更新所有相关的data-属性。
- *`aria-属性**:aria-controls、aria-expanded和aria-label`等ARIA（Accessible Rich Internet Applications）属性是用于提高网页可访问性的，它们不受Bootstrap版本更新的影响，应保持不变。
总结
从Bootstrap 4迁移到Bootstrap 5时，导航栏折叠功能失效的核心原因在于数据属性前缀的变化。通过将data-toggle和data-target更新为data-bs-toggle和data-bs-target，并确保正确引入Bootstrap 5的JavaScript文件，即可轻松解决此问题。理解这些版本间的差异对于平稳升级和维护基于Bootstrap的Web项目至关重要。
