top
Loading...
Bootstrap4 折叠

Bootstrap4 折叠

Bootstrap4 折叠可以很容易的實現內容的顯示與隱藏。

實例

<button data-toggle="collapse" data-target="#demo">折叠</button> <div id="demo" class="collapse"> Lorem ipsum dolor text.... </div>

嘗試一下 »

實例解析

.collapse 類用於指定一個折叠元素 (實例中的 <div>); 點擊按鈕後會在隱藏與顯示之間切換。

控製內容的隱藏與顯示,需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 屬性。 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>

嘗試一下 »

默認情況下折叠的內容是隱藏的,你可以添加 .show 類讓內容默認顯示:

實例

<div id="demo" class="collapse show"> Lorem ipsum dolor text.... </div>

嘗試一下 »

以下實例通過擴展卡片組件來顯示簡單的手風琴。

注意: 使用 data-parent 屬性來確保所有的折叠元素在指定的父元素下,這樣就能實現在一個折叠選項顯示時其他選項就隱藏。

實例

<div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> 選項一 </a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> #1 內容:教程 -- 學的不僅是技術,更是夢想!!! </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> 選項二 </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> #2 內容:教程 -- 學的不僅是技術,更是夢想!!! </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> 選項三 </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> #3 內容:教程 -- 學的不僅是技術,更是夢想!!! </div> </div> </div> </div>

嘗試一下 »
北斗有巢氏 有巢氏北斗