bootstrap中的导航栏

    导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的容器代码组合，它很容易扩展，而且在折叠板插件的帮助下，它可以轻松与其它内容整合。Bootstrap提供了一套基础CSS样式，与此同时还提供了一组前端组件，其中就有导航栏。

    导航栏：navbar
    
导航栏容器可以包含以下几个常用组成：

• 品牌LOGO（.navbar-brand ）
• 导航菜单（.navbar-nav）
• 导航文本（.navbar-text）
• 折叠导航按钮（.navbar-toggle）
• 表单（.form-inline）

导航容器一般使用nav标签来定义：

<nav class="navbar">...</nav>

导航容器可用样式：

• .navbar 导航栏基础样式
• .navbar-expand-{sm | md | xl | lg} 响应式导航，大屏幕水平铺开，小屏幕垂直堆叠
• .flex-top 导航栏一直在顶部
• .flex-bottom 导航栏一直在顶部
• .bg-{primary | secondary | success | info | danger | warning | dark | light} 导航栏的背景颜色
• .navbar-dark 导航配色方案。深色背景，加此样式可以突显文字
• .navbar-light 导航配色方案。浅色背景，加此样式可突显文字

导航菜单一般使用ul、li来定义

导航菜单可用样式：

• .navbar-nav 应用于ul标签
• .nav-item 、 .active 应用于li标签
• .nav-link 、 .disabled 应用于a标签

  <nav class="navbar navbar-expand-md bg-light nav-light">
      <ul class="navbar-nav">
            <li class="nav-item active"><a href="#" class="nav-link ">菜单一</a></li> 
            <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li> 
            <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li> 
      </ul> 
   </nav>

导航栏中加品牌元素（.navbar-brand）

   <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        <!-- 品牌 -->
       <a href="#" class="navbar-brand">品牌LOGO</a>
        <!-- 菜单 -->
      <ul class="navbar-nav">
          <li class="nav-item active"><a href="#" class="nav-link">菜单一</a></li>
          <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
          <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
      </ul>
   </nav>

品牌可以是文字，也可以是图片