ㄧ.導欄列

<div class="component demo">
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="nav-bar-brand">ninghao</a>
    <ul class="navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">學習</a></li>
      <li class="nav-item"><a href="#" class="nav-link">社區</a></li>
      <li class="nav-item"><a href="#" class="nav-link">博客</a></li>
    </ul>
  </nav>
</div>


#demo.component{
  padding: 50px;
}

重點：
1.導欄列需要在外方使用navbar
2. .navbar-expand-md，為md的時候的導欄列水平排列。如果小於的話就垂直排列
3. .navbar-brand 為您的公司，產品或專案名稱。也可以是logo
4. .navbar-nav 提供完整的高和輕便的導航（包括對下拉清單的支持）。也就是裡面有nav-item以及nav-link
5. .nav-link為連結的導欄列，.nav-item為連結導欄列外面的li
6. .avbar-light .bg-light為樣式，可參考官網：https://bootstrap.hexschool.com/docs/4.2/components/navbar/#color-schemes

codepen
參考：bootstrap4