bootstrap panel折叠,bootstrap左侧折叠菜单,bootstrap可折叠导航栏,bootstrap 折叠侧边栏,bootstrap侧边折叠导航,bootstrap折叠按钮
Bootstrap 5（BS5）是一个流行的前端开发框架，提供一些预定义的CSS和JavaScript组件来帮助开发人员更快速地构建现代化的Web应用程序。其中之一就是BS5折叠（Collapse），它允许您创建可以展开和收缩的内容区域。

当用户单击触发器按钮时，折叠区域会显示或隐藏。这在制作具有可折叠导航菜单、手风琴效果或展示/隐藏额外信息的页面元素时非常有用。

下面是一个简单的 BS5 折叠示例：

html
<!-- 触发器按钮 -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
点我折叠
</button>

<!-- 可折叠区域 -->
<div class="collapse" id="collapseExample">
<div class="card card-body">
这里是折叠区域的内容
</div>
</div>


在上面的代码中，我们使用了一个按钮标签和一个折叠区域标签。按钮标签具有 data-bs-toggle 和 data-bs-target 属性，用于指定该按钮要触发哪个折叠区域。折叠区域标签则具有 collapse 类名，它将该元素设为可折叠状态。

当用户单击按钮时，Bootstrap会自动添加或删除 show 类名来切换可折叠区域的显示/隐藏状态。您可以通过 CSS 样式来自定义可折叠区域的外观和行为。

除了上面的示例，BS5 折叠还提供了其他一些选项和事件，例如可以监听 show.bs.collapse 和 hide.bs.collapse 事件来在折叠区域展开和收缩时执行自定义操作。