本文記載boot 導航條組件使用方法 導航條組件 導航條是在您的應用或網站中作為導航頁頭的響應式基礎組件。它們在移動設備上可以摺疊(並且可開可關),且在視口(viewport)寬度增加時逐漸變為水平展開模式。 屏幕解析度變化時,頁面導航呈現不同效果,變小時會出現漢堡包按鈕,將頁面導航部分隱藏,以下拉 ...
本文記載boot 導航條組件使用方法
導航條組件
- 導航條是在您的應用或網站中作為導航頁頭的響應式基礎組件。它們在移動設備上可以摺疊(並且可開可關),且在視口(viewport)寬度增加時逐漸變為水平展開模式。
- 屏幕解析度變化時,頁面導航呈現不同效果,變小時會出現漢堡包按鈕,將頁面導航部分隱藏,以下拉列表的形式展示。
導航條使用
- 引入相應文件
bootstrap.min.css,bootstrap.min.js
- 構建頁面元素
<!-- NAV元素 --> <nav class="navbar navbar-defualt"> <div class="container-fluid"> <!--漢堡包按鈕部分--> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#下拉部分id"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!--品牌logo部分--> <a href="#" class="navbar-brand">品牌LOGO</a> </div> <!--下拉部分--> <div class="collapse navbar-collapse" id="下拉部分id"> <!--這裡可以放導航組件--> </div> </div> </nav>