bootstrap框架 导航条组件使用 - Riven952465

bootstrap框架 导航条组件使用

本文记载boot 导航条组件使用方法

导航条组件

• 导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
• 屏幕分辨率变化时，页面导航呈现不同效果，变小时会出现汉堡包按钮，将页面导航部分隐藏，以下拉列表的形式展示。

导航条使用

1. 引入相应文件

   bootstrap.min.css,bootstrap.min.js

2. 构建页面元素

<!-- 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" >
           <!--这里可以放导航组件-->
       </div>
   </div>
</nav>