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>
自己動手試一試 »
示例解釋
.collapse 類表示一個可摺疊元素（在我們的示例中是 <div>）；這是點選按鈕時顯示或隱藏的內容。
要控制（顯示/隱藏）可摺疊內容，請將 data-toggle="collapse" 屬性新增到 <a> 或 <button> 元素。然後新增 data-target="#id" 屬性以將按鈕與可摺疊內容（<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">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">
可摺疊組 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 摺疊參考。
