Bootstrap 折叠
基本可折叠
可折叠在您想要隐藏和显示大量内容时很有用
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>
自己试试 »
默认情况下，可折叠内容是隐藏的。 但是，您可以添加 .in 类以默认显示内容
可折叠面板
面板主体
以下示例显示了一个可折叠面板
示例
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">可折叠面板</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">面板主体</div>
<div class="panel-footer">面板页脚</div>
</div>
</div>
</div>
自己试试 »
可折叠列表组
- 一
- 二
- 三
以下显示一个带有列表组的可折叠面板
示例
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">可折叠列表组</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">一</li>
<li class="list-group-item">二</li>
<li class="list-group-item">三</li>
</ul>
<div class="panel-footer">页脚</div>
</div>
</div>
</div>
自己试试 »
手风琴
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 class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
可折叠组 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">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.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
可折叠组 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">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.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
可折叠组 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">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.</div>
</div>
</div>
</div>
自己试试 »
完整 Bootstrap 折叠参考
要查看所有折叠选项、方法和事件的完整参考，请访问我们的 Bootstrap JS 折叠参考。
