理想效果:
當浏覽器頁面大于768px時,導覽列最右側的菜單按鈕隐藏
當浏覽器頁面小于768px時,可以點選菜單按鈕顯示、隐藏下拉菜單
代碼:
其中navbar-toggle效果是隐藏菜單小圖示,當螢幕分辨率小于768px時,移除此效果。
data-toggle="collaspse"效果為此元素會與另一個元素關聯,關聯效果是顯示與隐藏。
data-target效果是選中與本元素關聯的元素,“引号”内填目标元素的類名或id名,
data-toggle用于控制隐藏無序清單,data-target用于指定被作用無序清單
data-toggle指以什麼事件觸發常用的如collapse,modal,popover,tooltips等;data-target指事件的目标, 一起使用就是代表data-target所指的元素以data-toggle指定的形式顯示。
Collapse 表示将頁面區域折疊起來
modal, 模态框
popover,彈出框,如需激活彈出框,使用者隻需把滑鼠懸停在元素上即可