Bootstrap4 教程
Bootstrap4 折疊可以很容易的實(shí)現(xiàn)內(nèi)容的顯示與隱藏,讓頁(yè)面排版更加簡(jiǎn)潔。
.collapse 類用于指定一個(gè)折疊元素 (實(shí)例中的 <div>); 點(diǎn)擊按鈕后會(huì)在隱藏與顯示之間切換。
控制內(nèi)容的隱藏與顯示,需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 屬性。 data-target="#id" 屬性是對(duì)應(yīng)折疊的內(nèi)容 (<div id="demo">)。
注意: <a> 元素上你可以使用 href 屬性來(lái)代替 data-target 屬性:
在Bootstrap4中,默認(rèn)情況下折疊的內(nèi)容是隱藏的,你可以添加 .show 類讓內(nèi)容默認(rèn)顯示:
以下實(shí)例通過(guò)擴(kuò)展卡片組件來(lái)顯示簡(jiǎn)單的手風(fēng)琴。
注意: 使用 data-parent 屬性來(lái)確保所有的折疊元素在指定的父元素下,這樣就能實(shí)現(xiàn)在一個(gè)折疊選項(xiàng)顯示時(shí)其他選項(xiàng)就隱藏。