导航栏和导航之间的区别：导航是非常的简单，也就是网页导航中的组成部分，一个链接一个链接组成的导航部分；导航栏其实和导航它俩是一个包含的关系，导航栏就多了一个栏可以看做多了一个栏，就是那一长串，可以放导航的。不代表我的导航栏里面就只仅仅放一个导航栏；也可以放一些输入框等项目中所需要的样式。

    1. <body>
    2.     <nav class="navbar navbar-expand-lg bg-light">navbar-expand-lg：去掉两端对齐
    3.         <a href="#" class="navbar-brand">
    4.             <img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
    5.                 class="align-top"> Bootstrap
    6.         </a>
    8.         <ul class="navbar-nav">
    9.             <li class="nav-item"><a href="#" class="nav-link">入门</a></li>
    10.             <li class="nav-item"><a href="#" class="nav-link">布局</a></li>
    11.             <li class="nav-item"><a href="#" class="nav-link">内容</a></li>
    12.             <li class="nav-item dropdown">
    13.                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">城市</a>
    14.                 <div class="dropdown-menu">
    15.                     <a href="#" class="dropdown-item">北京</a>
    16.                     <a href="#" class="dropdown-item">上海</a>
    17.                     <a href="#" class="dropdown-item">广州</a>
    18.                     <div class="dropdown-divider"></div>
    19.                     <a href="#" class="dropdown-item">深圳</a>
    20.                 </div>
    21.             </li>
    22.         </ul>
    24.         <!-- <div class="navbar-nav">
    25.             <a href="#" class="nav-item nav-link">入门</a>
    26.             <a href="#" class="nav-item nav-link">布局</a>
    27.             <a href="#" class="nav-item nav-link">内容</a>
    28.             <a href="#" class="nav-item nav-link">组件</a>
    29.         </div> -->
    30.     </nav>
    32.     <!-- 表单 -->
    33.     <nav class="navbar bg-light mt-5">
    34.         <a href="#" class="navbar-brand">
    35.             <img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
    36.                 class="align-top"> Bootstrap
    37.         </a>
    39.         <form action="#" class="form-inline">
    40.             <!-- <input type="search" class="form-control mr-sm-2" placeholder="Search">
    41.             <button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button> -->
    43.             <div class="input-group">
    44.                 <div class="input-group-prepend">
    45.                     <span class="input-group-text">@</span>
    46.                 </div>
    47.                 <input type="search" class="form-control mr-sm-2" placeholder="Search">
    48.             </div>
    49.             <button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button>
    50.         </form>
    51.     </nav>
    53.     <!-- 添加文本 -->
    54.     <nav class="navbar navbar-expand-lg bg-light mt-5">
    55.         <a href="#" class="navbar-brand">
    56.             <img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
    57.                 class="align-top"> Bootstrap
    58.         </a>
    60.         <ul class="navbar-nav mr-auto">mr-auto让下面文本排到了最右边
    61.             <li class="nav-item"><a href="#" class="nav-link">入门</a></li>
    62.             <li class="nav-item"><a href="#" class="nav-link">布局</a></li>
    63.             <li class="nav-item"><a href="#" class="nav-link">内容</a></li>
    64.         </ul>
    66.         <span class="navbar-text">这是导航当中的文本</span>
    67.     </nav>
    69.     <!-- 颜色 -->
    70.     <nav class="navbar navbar-expand-lg bg-dark navbar-dark mt-5">navbar-dark就是设置了字体颜色
    71.         <a href="#" class="navbar-brand">
    72.             <img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
    73.                 class="align-top"> Bootstrap
    74.         </a>
    76.         <ul class="navbar-nav mr-auto">
    77.             <li class="nav-item"><a href="#" class="nav-link">入门</a></li>
    78.             <li class="nav-item"><a href="#" class="nav-link">布局</a></li>
    79.             <li class="nav-item"><a href="#" class="nav-link">内容</a></li>
    80.         </ul>
    82.         <form action="#" class="form-inline">
    83.             <input type="search" class="form-control mr-sm-2" placeholder="Search">
    84.             <button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button>
    85.         </form>
    86.     </nav>
    88.     <!-- 居中容器 -->
    89.     <div class="container">
    90.         <nav class="navbar navbar-expand-lg bg-dark navbar-dark mt-5">
    91.             <a href="#" class="navbar-brand">
    92.                 <img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
    93.                     class="align-top"> Bootstrap
    94.             </a>
    96.             <ul class="navbar-nav mr-auto">
    97.                 <li class="nav-item"><a href="#" class="nav-link">入门</a></li>
    98.                 <li class="nav-item"><a href="#" class="nav-link">布局</a></li>
    99.                 <li class="nav-item"><a href="#" class="nav-link">内容</a></li>
    100.             </ul>
    102.             <form action="#" class="form-inline">
    103.                 <input type="search" class="form-control mr-sm-2" placeholder="Search">
    104.                 <button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button>
    105.             </form>
    106.         </nav>
    107.     </div>
    109.     <!-- 定位 -->
    110.     <!-- <nav class="navbar navbar-light bg-light fixed-top">
    111.         <a href="#" class="navbar-brand">因定在顶部</a>
    112.     </nav> -->
    113.     <nav class="navbar navbar-light bg-light fixed-bottom">
    114.         <a href="#" class="navbar-brand">因定在底部</a>
    115.     </nav>
    116.     <nav class="navbar navbar-light bg-light sticky-top">
    117.         <a href="#" class="navbar-brand">粘性定位在浏览器的顶部</a>
    118.     </nav>
    120.     <!-- 响应式 -->
    121.     <nav class="navbar navbar-expand-md bg-success navbar-dark mt-5">
    122.         <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
    123.             <span class="navbar-toggler-icon"></span>尺寸小于md的时候这个按钮就会出来
    124.         </button>
    125.         <div class="collapse navbar-collapse" id="navbar">
    126. collapse折叠的基础class，在没有符合尺寸下就是隐藏起来，这时候就不是felx模型了，是block元素；默认情况下它是一个flex；
    128.             <a href="#" class="navbar-brand">
    129.                 <img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
    130.                     class="align-top"> Bootstrap
    131.             </a>
    132.             <ul class="navbar-nav mr-auto">在没有符合尺寸下 就变成了竖着排了
    133.                 <li class="nav-item"><a href="#" class="nav-link">入门</a></li>
    134.                 <li class="nav-item"><a href="#" class="nav-link">布局</a></li>
    135.                 <li class="nav-item"><a href="#" class="nav-link">内容</a></li>
    136.             </ul>
    138.             <form action="#" class="form-inline">
    139.                 <input type="search" class="form-control mr-sm-2" placeholder="Search">
    140.                 <button type="submit" class="btn btn-outline-light mt-2 mt-sm-0">Search</button>
    141.             </form>
    142.         </div>
    143.     </nav>
    144.     <!-- 左侧是logo，右侧是按钮 -->
    145.     <nav class="navbar navbar-expand-md bg-success navbar-dark mt-5">
    146.         <a href="#" class="navbar-brand">
    147.             <img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
    148.                 class="align-top"> Bootstrap
    149.         </a>
    150.         <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar1">
    151.             <span class="navbar-toggler-icon"></span>
    152.         </button>
    153.         <div class="collapse navbar-collapse" id="navbar1">
    154.             <ul class="navbar-nav mr-auto">
    155.                 <li class="nav-item"><a href="#" class="nav-link">入门</a></li>
    156.                 <li class="nav-item"><a href="#" class="nav-link">布局</a></li>
    157.                 <li class="nav-item"><a href="#" class="nav-link">内容</a></li>
    158.             </ul>
    160.             <form action="#" class="form-inline">
    161.                 <input type="search" class="form-control mr-sm-2" placeholder="Search">
    162.                 <button type="submit" class="btn btn-outline-light mt-2 mt-sm-0">Search</button>
    163.             </form>
    164.         </div>
    165.     </nav>
    166.     <!-- 左侧是按钮，右侧是logo -->
    167.     <nav class="navbar navbar-expand-md bg-success navbar-dark mt-5">
    168.         <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar2">
    169.             <span class="navbar-toggler-icon"></span>
    170.         </button>
    171.         <a href="#" class="navbar-brand">
    172.             <img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
    173.                 class="align-top"> Bootstrap
    174.         </a>
    175.         <div class="collapse navbar-collapse" id="navbar2">
    176.             <ul class="navbar-nav mr-auto">
    177.                 <li class="nav-item"><a href="#" class="nav-link">入门</a></li>
    178.                 <li class="nav-item"><a href="#" class="nav-link">布局</a></li>
    179.                 <li class="nav-item"><a href="#" class="nav-link">内容</a></li>
    180.             </ul>
    182.             <form action="#" class="form-inline">
    183.                 <input type="search" class="form-control mr-sm-2" placeholder="Search">
    184.                 <button type="submit" class="btn btn-outline-light mt-2 mt-sm-0">Search</button>
    185.             </form>
    186.         </div>
    187.     </nav>