本文旨在解决bootstrap 5导航栏切换按钮（toggler button）无法正常展开或收起折叠菜单的问题。核心原因通常是缺少bootstrap javascript文件，导致依赖该脚本的折叠功能无法初始化。文章将详细指导如何正确引入bootstrap js，并提供完整的代码示例和关键属性解析，确保您的响应式导航栏功能完备。
理解Bootstrap导航栏切换机制
Bootstrap 5的导航栏（Navbar）在小屏幕设备上通常会折叠起来，并通过一个切换按钮（Toggler Button）来控制其展开和收起。这个功能的实现并非纯粹的CSS，而是依赖于Bootstrap内置的JavaScript插件，特别是其“Collapse”组件。当点击切换按钮时，JavaScript会监听这个事件，并根据预设的data-bs-target属性来找到对应的可折叠元素（通常是一个div），然后通过添加或移除CSS类（如show）来控制其显示状态。
如果缺少了必要的JavaScript文件，即使HTML结构和CSS样式都正确，切换按钮也无法触发任何行为，因为驱动该交互逻辑的脚本未被加载。
核心问题：缺少Bootstrap JavaScript文件
在许多情况下，导航栏切换按钮不工作的原因是开发者只引入了Bootstrap的CSS文件，而忽略了其JavaScript文件。Bootstrap 5的JavaScript文件通常包含所有交互式组件（如模态框、轮播图、下拉菜单和折叠菜单）所需的逻辑。
为了使切换按钮正常工作，您需要引入Bootstrap的JS Bundle文件，它包含了Popper.js（用于工具提示、弹出框等）和Bootstrap的所有JavaScript插件。
解决方案：正确引入Bootstrap JavaScript
将Bootstrap JavaScript文件引入到HTML文档的
