Bootstrap 4 折叠
基本折叠
当您想隐藏和显示大量内容时，折叠非常有用
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
示例
<button data-toggle="collapse" data-target="#demo">折叠</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
自己试一试 »
示例说明
The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button.
To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">).
注意：对于 <a> 元素，您可以使用 href 属性而不是 data-target 属性
示例
<a href="#demo" data-toggle="collapse">折叠</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
自己试一试 »
默认情况下，折叠内容是隐藏的。但是，您可以添加 .show 类，以默认显示内容
手风琴
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
以下示例通过扩展卡片组件显示一个简单的手风琴。
注意：使用 data-parent 属性确保在显示其中一个折叠项目时，指定父级下的所有折叠元素都将关闭。
示例
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
折叠组项目 #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
折叠组项目 #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
折叠组项目 #3
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
</div>
自己试一试 »
完整的 Bootstrap 4 折叠参考
有关所有折叠选项、方法和事件的完整参考，请访问我们的 Bootstrap 4 JS 折叠参考。
