导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的容器代码组合，它很容易扩展，而且在折叠板插件的帮助下，它可以轻松与其它内容整合。

运行原理：

  • 导航栏需要使用.navbar 来定义，并使用 .navbar-expand{-sm|-md|-lg|-xl} 用于响应式布局以及使用配色方案Class 。
  • 导航栏默认内容是流式的，使用 containers容喇来限制它们的水平宽度。
  • 使用我们提供的 间隙间距 和 flex 布局 classes 来定义导航栏中元素的间距和对齐。
  • Navbars导航栏默认支持响应式，在修改上也很容易，你可以使用轻松的来定义它们-这取决于我们提供的 JavaScript 插件。
  • 打印时，导航栏默认隐藏。如果需要打印显示，可以加入.d-print 样式到 .navbar中，点此参阅 display块元素 通用 class定义。
  • 使用<nav>导航通用元素来确保可访问性（易用性），或者如果使用更通用的元素，例如<div>添加一个role="navigation"，可以为使用者的辅助浏览提供明确标识。

导航栏代码：

  1. <!-- <nav class="navbar navbar-expand-lg navbar-light bg-light"> 白色背景 -->
  2.   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  3.     <!-- 黑色背景 -->
  4.     <a class="navbar-brand" href="#">Navbar</a> <!-- 标题 -->
  6.     <!-- 移动端下拉目录按钮 -->
  7.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#my_navbarSupportedContent"
  8.       aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  9.       <span class="navbar-toggler-icon"></span>
  10.     </button>
  12.     <div class="collapse navbar-collapse" id="my_navbarSupportedContent">
  13.       <ul class="navbar-nav mr-auto">
  14.         <li class="nav-item active">
  15.           <a class="nav-link" href="#">主页 <span class="sr-only">(current)</span></a>
  16.         </li>
  17.         <li class="nav-item">
  18.           <a class="nav-link" href="#">Link</a>
  19.         </li>
  20.         <li class="nav-item dropdown">
  21.           <a class="nav-link dropdown-toggle" href="#" id="my_navbarDropdown" role="button" data-toggle="dropdown"
  22.             aria-haspopup="true" aria-expanded="false">
  23.             Dropdown
  24.           </a>
  25.           <div class="dropdown-menu" aria-labelledby="my_navbarDropdown">
  26.             <a class="dropdown-item" href="#">Action</a>
  27.             <a class="dropdown-item" href="#">Another action</a>
  29.             <!-- 分割线 -->
  30.             <div class="dropdown-divider"></div>
  31.             <a class="dropdown-item" href="#">Something else here</a>
  32.           </div>
  33.         </li>
  34.         <li class="nav-item">
  35.           <a class="nav-link disabled" href="#">Disabled</a>
  36.         </li>
  37.       </ul>
  38.       <form class="form-inline my-2 my-lg-0">
  39.         <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  40.         <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  41.       </form>
  42.     </div>
  43.   </nav>

导航栏效果：

图片.png