基本可折疊
當你想隱藏和顯示大量的內容Collapsibles是有用的：
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">Collapsible</button>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> 試一試» 例子解釋：
該.collapse類表示一個可折疊的元素（ <div>在我們的例子）; 這是將要顯示或隱藏一個按鈕，點擊的內容。
為了控制（顯示/隱藏）可折疊的內容，添加data-toggle="collapse"屬性的<a>或<button>元素。 然後添加data-target="#id"屬性的按鈕，可折疊的內容連接(<div id="demo">)
注意：對於<a>元素，你可以使用href屬性，而不是data-target的屬性：
例
<a href="#demo" data-toggle="collapse">Collapsible</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">Collapsible panel</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<div
class="panel-body">Panel Body</div>
<div
class="panel-footer">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">Collapsible list group</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<ul
class="list-group">
<li
class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">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">
Collapsible
Group 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">
Collapsible
Group 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">
Collapsible
Group 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折疊參考 。