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>
自己動手試一試 »
示例解釋
.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>
自己動手試一試 »
預設情況下，可摺疊內容是隱藏的。但是，您可以新增 .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 摺疊參考。
