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在右边。

<nav id="main_nav" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
    <a href="#" class="navbar-brand">CANDY</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navlinks" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navlinks">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="" class="nav-link">HOME</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">ABOUT</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">US</a>
        </li>
      </ul>
    </div>
  </nav>