详细说明基于 Bootstrap4 编写 一个响应式导航栏

风格一：

【代码】

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

【效果】
PC端：

移动端：

这是一个官方的例子，接下来对它做如下解释：

nav ：在创建一个导航栏时，你需要把它放在nav标签里，目的是为了确保亲和性，除此之外，如果你想在导航栏里添加一些辅助样式，可以在外面包一个div标签，然后指定额外的辅助样式，比如：

<div class="navigation">
	<nav>
		...
	</nav>
</div>

navbar ：该类用于创建一个标准的导航栏，去掉该类整体布局都会乱掉。

navbar-expand-lg ：该类用于设置响应式折叠断点。什么意思呢，比方说，就用navbar-expand-lg，那么当屏幕尺寸小到 lg 断点时，菜单就会被折叠，而如果使用其它类似的，比方说navbar-expand-md，那么只有当屏幕尺寸小于 md 断点时，菜单才会被折叠。删除该类，那么导航栏将变为垂直排列。

navbar-brand ：该类用于装饰你的网站名字，或者说商标。

紧接着是一个button按钮，为什么这里会有一个button呢？其实，这个button，设置的就是当导航栏被折叠时可以通过点击打开导航栏的那个按钮。

navbar-toggler ：该类修饰button按钮，如果不加该类，那么你的button按钮会很难看。另外，它还定义了折叠插件的一些样式和行为。

data-toggle="collapse" ：可以看到在button按钮中有这么一个属性，该属性用于设置button的行为，即单击一次打开导航栏，再单击一个关闭导航栏，如果不设置该属性，那么你的button按钮即使被点击了也将毫无反应。

data-target="#navbarSupportedContent" ：该属性用于设置button按钮需要打开的导航栏，它的值为一个id，你会发现该id刚好是下面的导航栏的id，所以button按钮才能打开它。如果不设置该值，那么你的button按钮将形同虚设。

其实，你的button按钮里面只要有以上这两个属性，外加一个navbar-toggler就可以了，剩余的其它属性加不加都可，不会影响总体样式和功能，你自己看着办。

navbar-toggler-icon : 这个设置的其实就是按钮里面的那三条杠，没有它的话，按钮就只是一个普通的按钮了，很丑。

接着就是导航栏的主体部分。这里用了一个div标签控制整体样式。

collapse ：该类定义了导航栏在屏幕尺寸小于断点的初始状态下是否会被隐藏。什么意思呢，对于屏幕尺寸大于断点的情况，该类没什么用，对于屏幕尺寸小于断点的情况，如果加上这个类，那么初始状态下导航栏是被折叠的状态，如果不加该类，那么初始状态下导航栏是未被折叠的状态，当然不管加不加该类，都不影响导航栏之后因为单击按钮而被隐藏或者显示这一功能，因为按钮不会被隐藏。

navbar-collapse：该类定义了导航栏在屏幕尺寸大于断点的初始状态下是否会被隐藏。如果不加该类，那么在大于断点的情况下，导航栏会被隐藏，但小于断点的情况不受影响。另外，如果不加该类，那么在大于断点的情况下，导航栏就真的被隐藏了，因为这时按钮也会被隐藏，所以无法通过任何行为来显示导航栏。

navbar-nav ：该类用于全高度的轻量级导航，包括对下拉菜单的支持，如果不加该类，那么你的导航栏将可能会是这样：

mr-auto：即 margin-right:auto。

nav-item & nav-link ：都是控制每一项的样式的。

sr-only ：

有时候 UI 上会出现一些仅供视觉识别的元素，比如说“汉堡包菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器，也就是 screen reader（sr），屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。问题是图形元素怎么可能“读出来”呢？因此我们还要写上这些元素的文本说明，但是又不需要展示给普通用户看到，于是加上 sr-only的意义就在于能保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现。
链接：https://www.cnblogs.com/xiaoxiaoyao/p/8629474.html

dropdown & dropdown-menu & dropdown-item ：下拉菜单。注意需要设置 data-toggle=“dropdown”。

dropdown-divider ：下拉菜单分割线。

form-inline ：用于任何表单控制元件和操作。

my-2 ：m即margin，y即y轴，my-2表示margin的上下边距均为2。

form-control：表单样式。

btn btn-outline-success：button样式。