bootstrap中導航條data-toggle=collapse與data-target的聯動
理想效果:
當瀏覽器頁面大於768px時,導航條最右側的菜單按鈕隱藏
當瀏覽器頁面小於768px時,可以點擊菜單按鈕顯示、隱藏下拉菜單
代碼:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#primary-menu-wrap" aria-controls="primary-menu-wrap" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
【class=”navbar-toggler】
navbar-toggle效果是隱藏菜單小圖標,當屏幕分辨率小於768px時,移除此效果。
【data-toggle=”collapse】
效果為此元素會與另一個元素聯動,聯動效果是顯示與隱藏
【data-target=”#navbarNavDropdown”】
效果是選中與本元素聯動的元素,“引號”內填目標元素的類名或id名
data-toggle用於控制隱藏無序列表,data-target用於指定被作用無序列表
data-toggle的其他屬性:
參考:
Bootstrap4 摺疊:https://www.runoob.com/bootstrap4/bootstrap4-collapse.html