)。
注意: 元素上你可以使用 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
>
嘗試一下 ?
網頁名稱：創(chuàng)新互聯Bootstrap4教程：Bootstrap4折疊
本文URL：
http://m.fisionsoft.com.cn/article/dhedojp.html
建站
咨詢
售后
建站咨詢
