天天看點

bootstrap中導覽列data-toggle=collapse與data-target的關聯

理想效果:

當浏覽器頁面大于768px時,導覽列最右側的菜單按鈕隐藏

bootstrap中導覽列data-toggle=collapse與data-target的關聯

當浏覽器頁面小于768px時,可以點選菜單按鈕顯示、隐藏下拉菜單

bootstrap中導覽列data-toggle=collapse與data-target的關聯

代碼:

其中navbar-toggle效果是隐藏菜單小圖示,當螢幕分辨率小于768px時,移除此效果。

data-toggle="collaspse"效果為此元素會與另一個元素關聯,關聯效果是顯示與隐藏。

data-target效果是選中與本元素關聯的元素,“引号”内填目标元素的類名或id名,

bootstrap中導覽列data-toggle=collapse與data-target的關聯

data-toggle用于控制隐藏無序清單,data-target用于指定被作用無序清單

data-toggle指以什麼事件觸發常用的如collapse,modal,popover,tooltips等;data-target指事件的目标, 一起使用就是代表data-target所指的元素以data-toggle指定的形式顯示。  

Collapse 表示将頁面區域折疊起來

modal, 模态框

popover,彈出框,如需激活彈出框,使用者隻需把滑鼠懸停在元素上即可