bootstrap4-Collapse 折叠 酷炫特效
生活随笔
收集整理的這篇文章主要介紹了
bootstrap4-Collapse 折叠 酷炫特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? ?一· 引用文件：CSS:? bootstrap.min
? ? ? ? ? ? ? ? ? ? ? js: 1. jquery-3.2.1.min
? ? ? ? ? ? ? ? ? ? ? ? ? ?2.?bootstrap.min
?
? ? ? ?簡介：1.Collapse 類用于指定一個折疊元素 (實例中的 <div>); 點擊按鈕后會在隱藏與顯示之間切換。
? ? ? ? 2.控制內容的隱藏與顯示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 屬性。
? ? ? ? ? 3.data-target="#id" 屬性是對應折疊的內容 (<div id="demo">)
?? ??? ?注意: <a> 元素上你可以使用 href 屬性來代替 data-target 屬性。
? ? ?二· 運用Bootstarp搭建框架
? ? ? 目標完成效果圖：
<!doctype html> <html> <head><meta charset="utf-8"><title>bootstrap4-Collapse 折疊</title><link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css"><script src="js/jquery-3.2.1.min.js"></script><script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script> </head><body><div class="container"><h3 class="h3">Collapse</h3><p><a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">Link 和 href</a><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">Button 和 data-target</button></p><div class="collapse" id="collapseExample"><div class="card card-body"><h3>人之有好也，學而順之；人之有惡也，避而諱之，故陰道而陽取之也。</h3>如果對方有某種嗜好，就要仿效以迎合他的興趣；如果對方厭惡什么，就要加以避諱以免引起反感。所以要進行隱密謀劃而公開的進行獲取。</div></div><h3 class="h3 mt-2">多個目標</h3><p><a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1">切換第一個元素</a><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2">切換第二個元素</button><button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse">切換兩個元素</button></p><div class="row"><div class="col"><div class="collapse multi-collapse" id="multiCollapseExample1"><div class="card card-body"><h3>故知之始己，自知而后知人也。</h3>所以要想掌握情況，要先從自己開始，只有了解自己，然后才能了解別人。</div></div></div><div class="col"><div class="collapse multi-collapse" id="multiCollapseExample2"><div class="card card-body"><h3>貌者不美，又不惡，故至情托焉。</h3>無論遇到什么事情，既不喜形于色，也不怒目相待的人，是讓人感覺深沉的人，是一個值得信賴的人，是可以托之以機密大事的。</div></div></div></div></div><script>$('.collapse').collapse();</script> </body> </html>? ? ? 這樣就全部完成了，? ? 想要了解更多的私信?
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?新手上路 多多支持?
總結
以上是生活随笔為你收集整理的bootstrap4-Collapse 折叠 酷炫特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用bootstrap.css框架无法显
- 下一篇： 什么是TXT记录？如何设置、检测TXT记