Kusababisha ya Bootstrap 5

基础的折叠

当您想要隐藏和显示大量内容时，可折叠组件非常有用：

实例

<button data-bs-toggle="collapse" data-bs-target="#demo">春日</button>
<div id="demo" class="collapse">
  
胜日寻芳泗水滨，无边光景一时新。

  
等闲识得东风面，万紫千红总是春。

</div>

Jaribu kwa mwenyewe

例子解释

.collapse 类指示可折叠元素（在我们的例子中为 <div>）；通过单击按钮，可显示或隐藏的内容。

如需控制（显示/隐藏）可折叠内容，请将 data-bs-toggle="collapse" 属性添加到 <a> 或 <button> 元素。然后添加 data-bs-target="#id" 属性来连接按钮和可折叠内容（<div id="demo">）。

注释：对于 <a> 元素，您可以使用 href 属性代替 data-bs-target 属性：

实例

<a href="#demo" data-bs-toggle="collapse">春日</a>
<div id="demo" class="collapse">
  
胜日寻芳泗水滨，无边光景一时新。

  
等闲识得东风面，万紫千红总是春。

</div>

Jaribu kwa mwenyewe

默认情况下，可折叠内容是隐藏的。但是，您可以添加 .show 类来默认显示内容：

实例

<div id="demo" class="collapse show">
  
胜日寻芳泗水滨，无边光景一时新。

  
等闲识得东风面，万紫千红总是春。

</div>

Jaribu kwa mwenyewe

Accordion（手风琴）

下面通过扩展 card 组件，显示一个简单的手风琴。

注释：使用 data-bs-parent 属性确保当显示可折叠项目之一时，会关闭指定父项下的所有可折叠元素。

实例

Jaribu kwa mwenyewe