Bootstrap5中的Collapse（折叠）组件

在 Bootstrap 5 中，Collapse（折叠）是一种用于显示和隐藏内容的交互性组件。它允许用户通过点击或触摸某个元素（通常是按钮或链接）来展开或收起一个内容区域。折叠组件常用于创建可折叠的导航菜单、侧边栏、面板等。

在 Bootstrap 5 中，折叠组件可以通过几个简单的 HTML 标记和类来实现。以下是一个基本的折叠组件的示例：

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

<!-- 折叠内容 -->
<div class="collapse" id="myCollapse">
  <div class="card card-body">
    Some placeholder content for the collapse component. This is only visible when the collapse is open.
  </div>
</div>

在这个示例中，data-bs-toggle="collapse" 属性告诉 Bootstrap 该按钮用于控制折叠。data-bs-target="#myCollapse" 属性指定了要折叠或展开的元素的 ID。折叠内容的容器具有 collapse 类，并且其 ID 与 data-bs-target 的值相匹配。

当用户点击按钮时，折叠内容会展开或收起，具体取决于其当前的状态。aria-expanded 属性用于提供可访问性信息，指示折叠内容当前是展开的还是收起的。aria-controls 属性则指定了被按钮控制的元素。

你可以通过添加额外的类来自定义折叠按钮和折叠内容的样式。例如，你可以使用 btn-secondary、btn-success 等类来改变按钮的颜色，或者使用 card 和 card-body 类来创建一个卡片样式的折叠内容。