什么是 Collapse
Collapse 是 Bootstrap 框架中的一个组件，用于在网页中创建可折叠的元素，可以使页面更具有交互性，节省页面空间。用户可以点击标题或按钮来展开或折叠相应的内容区域。
Collapse 的使用示例
以下是一个基本的 Collapse 使用示例：
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#demo">
点击展开/折叠内容
</button>
<div id="demo" class="collapse">
<p>这里是折叠的内容。</p>
</div>
在上面的示例中，我们首先创建了一个按钮，使用 btn 和 btn-primary 类来指定按钮的样式。接着，我们在按钮上添加了 data-toggle 和 data-target 属性，用于控制 Collapse 的行为。data-toggle 属性设置为 collapse，表示点击按钮时会触发折叠行为；data-target 属性设置为 #demo，表示 id 为 demo 的元素是要进行折叠的内容。
然后，在按钮下方我们创建了一个 div 元素，并给它添加了 id 为 demo，并且使用 collapse 类来设置该元素的初始折叠状态。在这个 div 内部，我们可以放置任何内容，例如上面示例中的 <p>这里是折叠的内容。</p>。
这样，当用户点击按钮时，元素 id 为 demo 的内容会展开或折叠。
Collapse 的其他用法
Collapse 组件还可以进行更多的定制和改变。例如，我们可以修改 Collapse 的默认显示状态，添加动画效果，或者设置折叠状态的时候改变按钮的样式。下面给出一些示例：
- 修改 Collapse 的默认显示状态：
<div class="collapse show">
<p>这是默认展开的内容。</p>
</div>
在这个例子中，我们在 collapse 类名后添加了 show，表示默认情况下这个元素是展开的，而不是折叠的。
- 添加动画效果：
<div class="collapse" data-toggle="collapse" data-target="#demo" data-animation="slide">
<p>这是带动画效果的折叠内容。</p>
</div>
在这个例子中，我们为 Collapse 元素添加了 data-animation 属性，并将其设置为 slide，表示在折叠或展开的时候会添加滑动效果。
- 设置折叠状态时改变按钮样式：
<button class="btn" type="button" data-toggle="collapse" data-target="#demo" data-expanded-text="收起" data-collapsed-text="展开">
展开/收起内容
</button>
<div id="demo" class="collapse">
<p>这是可以折叠的内容。</p>
</div>
在这个例子中，我们添加了 data-expanded-text 和 data-collapsed-text 属性来分别设置按钮的文本内容。当 Collapse 处于展开状态时，按钮显示 "收起"，当处于折叠状态时，按钮显示 "展开"。
总结
Collapse 是 Bootstrap 框架中用于创建可折叠元素的组件。通过简单的 HTML 结构和添加一些 Bootstrap 的类和属性，我们可以轻松地创建具有折叠功能的内容区域。以上是一些 Collapse 的示例用法，你可以根据实际需求进行定制和修改，使其更适合你的网页设计。
希望这篇博客对你理解和使用 Bootstrap 的 Collapse 组件有所帮助！
本文来自极简博客，作者：暗夜行者，转载请注明原文链接：Bootstrap 的 Collapse 使用示例
