nav bar

fixed-top 滑动网页时，让nav始终停留在页面顶端。

navbar, 当屏幕缩放到很小时，显示navbar-toggler
navbar-brand for your company, product, or project name.
<span class="navbar-toggler-icon"></span>.-----图标
navbar-toggler下拉的时候显示什么？ ----data-target="#navlinks"

.collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint. In our case,
all the sub-components included in a responsive light-themed navbar that automatically collapses at the md(medium) breakpoint.

navbar-expand-md ----breakpoint: md
Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler.在代码里面我们先写到navbar-brand，再写的navbartoggler,所以当屏幕缩小时我们看到的是CANDY在左边，navbartoggle在右边。

 1 <nav id="main_nav" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
 2     <a href="#" class="navbar-brand">CANDY</a>
 3     <button class="navbar-toggler" data-toggle="collapse" data-target="#navlinks" aria-label="Toggle navigation">
 4       <span class="navbar-toggler-icon"></span>
 5     </button>
 6     <div class="collapse navbar-collapse" id="navlinks">
 7       <ul class="navbar-nav">
 8         <li class="nav-item">
 9           <a href="" class="nav-link">HOME</a>
10         </li>
11         <li class="nav-item">
12           <a href="" class="nav-link">ABOUT</a>
13         </li>
14         <li class="nav-item">
15           <a href="" class="nav-link">US</a>
16         </li>
17       </ul>
18     </div>
19   </nav>