bootstrap 隐藏元素_Bootstrap中折叠面板的样式内容
生活随笔
收集整理的這篇文章主要介紹了
bootstrap 隐藏元素_Bootstrap中折叠面板的样式内容
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Bootstrap折疊板插件允許你在網頁中用一點點JavaScript以及CSS類切換內容，控制內容的可見性。它是一個靈活的插件，使用少量的類（來自必需的過渡插件），以方便切換行為。
運作方式
插件用于顯示和隱藏內容。 按鈕或錨點用作觸發器，映射到您切換的特定元素。 折疊元素會將height從其當前值設置為0。使用CSS處理動畫的方式，您不能在.collapse上使用padding相反，使用該類作為獨立的包裝元素。
示例
- .collapse 隱藏內容
- .collapsing 帶動態效果的切換
- .collapse.show 顯示內容
你可以使用帶href屬性的連接,、或者帶data-target屬性的按鈕來創建折疊效果-這兩種情況下data-toggle="collapse"屬性都是必須的。
<div class="row mt-5"><div class="col"><p><a href="#kengdie" class="btn btn-primary" data-toggle="collapse">坑爹</a><button class="btn btn-primary" data-toggle="collapse" data-target="#kengdie">坑爹</button></p><div class="collapse show" id="kengdie"><div class="card card-body">坑爹一般用于諷刺、嘲笑或吐槽不滿。意指與本人意愿有很大出入，有欺騙的意思，又包含了幾絲“不給力”的意思成分。該網絡用語“坑爹”一詞最早出現于網絡游戲魔獸世界。</div></div></div> </div>多目標控制
可以在<button>或者<a>標簽上，通過 JQuery選擇器來顯示和隱藏多個元素（或者多個<button>、<a>元素來控制顯示/隱藏一個元素素）），如果被引用對象的href或者data-target屬性定義正確。
<!-- 多個目標 --> <div class="row mt-5"><div class="col-12"><p><a href="#diaosi" class="btn btn-primary" data-toggle="collapse">屌絲</a><button class="btn btn-primary" data-toggle="collapse" data-target="#tuhao">土豪</button><button class="btn btn-primary" data-toggle="collapse" data-target="#nvshen">女神</button><button class="btn btn-primary" data-toggle="collapse" data-target=".all">控制全部</button></p></div><div class="col-4 collapse all" id="diaosi"><div class="card card-body">屌絲 [1]來源于中國大陸地區的中國網絡文化。表達意思是諷刺；另一意思是指喻不方便明言或不合適直言的隱語，多用于熟人之間互侃或者互貶。同時指的是比喻自嘲。多用自嘲來活躍氣氛，屌絲一詞傳用至今已無特定人群的界限，多用于朋友，熟人之間的戲侃。</div></div><div class="col-4 collapse all" id="tuhao"><div class="card card-body">土豪，網絡用語。原指鄉下財大氣粗、沒什么品味的有錢人，現多指有錢、不理性消費、喜歡炫耀的人。出自《宋書·殷琰傳》：“叔寶者，杜坦之子，既土豪鄉望，內外諸軍事并專之。”</div></div><div class="col-4 collapse all" id="nvshen"><div class="card card-body">女神是一個漢語詞語，拼音是nǚshén，意思指對女性的神明或至尊的稱謂，特指神話傳說中的女性至高者。后來引申為容貌漂亮、具有智慧、優雅、貞潔以及高素質的女性。在現代社會，女神常用來定義男性心目中喜愛，但難以成為真正戀愛對象的女生。</div></div> </div>手風琴折疊范例
<!-- 手風琴 --> <div class="row mt-5"><div class="accordion" id="accordion"><!-- 第一項 --><div class="card"><div class="card-header"><button class="btn btn-link" data-toggle="collapse" data-target="#item1">屌絲</button></div><div class="collapse show" id="item1" data-parent="#accordion"><div class="card-body">屌絲 [1]來源于中國大陸地區的中國網絡文化。表達意思是諷刺；另一意思是指喻不方便明言或不合適直言的隱語，多用于熟人之間互侃或者互貶。同時指的是比喻自嘲。多用自嘲來活躍氣氛，屌絲一詞傳用至今已無特定人群的界限，多用于朋友，熟人之間的戲侃。</div></div></div><!-- 第二項 --><div class="card"><div class="card-header"><button class="btn btn-link" data-toggle="collapse" data-target="#item2">土豪</button></div><div class="collapse" id="item2" data-parent="#accordion"><div class="card-body">屌絲 [1]來源于中國大陸地區的中國網絡文化。表達意思是諷刺；另一意思是指喻不方便明言或不合適直言的隱語，多用于熟人之間互侃或者互貶。同時指的是比喻自嘲。多用自嘲來活躍氣氛，屌絲一詞傳用至今已無特定人群的界限，多用于朋友，熟人之間的戲侃。</div></div></div><!-- 第三項 --><div class="card"><div class="card-header"><button class="btn btn-link" data-toggle="collapse" data-target="#item3">女神</button></div><div class="collapse" id="item3" data-parent="#accordion"><div class="card-body">屌絲 [1]來源于中國大陸地區的中國網絡文化。表達意思是諷刺；另一意思是指喻不方便明言或不合適直言的隱語，多用于熟人之間互侃或者互貶。同時指的是比喻自嘲。多用自嘲來活躍氣氛，屌絲一詞傳用至今已無特定人群的界限，多用于朋友，熟人之間的戲侃。</div></div></div></div> </div>js的方法與事件 $('.collapse').collapse()
方法：
.collapse(options)：啟用你的可折疊對象，通過object方法。
.collapse('toggle')：即發生shown.bs.collapse或hidden.bs.collapse事件前)返回給調用者。
.collapse('show')：顯示可折疊元素，在可折疊元素實際顯示之前(即shown.bs.collapse事件發生之前)返回給調用者。
.collapse('hide')：隱藏可折疊元素，在可折疊元素實際上被隱藏之前(即hidden.bs.collapse事件發生之前)返回給調用者。
.collapse('dispose')：銷毀一個元素的折疊。
事件：
| show.bs.collapse | 當調用show 方法時，會立即觸發事件。 |
| shown.bs.collapse | 用戶可見折疊面板中的塊時，會觸發此事件（需要等CSS加載過渡完成）。 |
| hide.bs.collapse | 當調用hide 方法時，立即觸發該事件。 |
| hidden.bs.collapse | 當折疊面板中的塊對于用戶完全隱藏時（需要等CSS加載過渡完成），會觸發該事件）。 |
總結
以上是生活随笔為你收集整理的bootstrap 隐藏元素_Bootstrap中折叠面板的样式内容的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python创建excel图表_Pyth
- 下一篇： 台式电脑的主板怎么安装 台式机主板安装步