11. 導覽列

1. BootStrap4 有內建導覽列：http://bootstrap.hexschool.com/docs/4.0/components/navbar/
2. 直接照著下面的架構做即可：

   <nav class="navbar navbar-expand-md">
       <button class="navbar-toggler navbar-toggler-right" 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">
               <!--此處加入選項-->
   
           </ul>
       </div>
   </nav>  

3. .navbar-expand-md 是指在 md 範圍以上才會直接展開選項

4. <button>中的data-target="#navbarSupportedContent" 必須對應下方<div>中的id="navbarSupportedContent"

5. 目前就只能一層，要多層的話，須改用其他的導覽列工具。
6. 若想加入一個不含子選單的選項，可用：

   <li class="nav-item">
       <a class="nav-link" href="#">選項</a>
   </li>

7. 若想加入一個有含子選單的選項，可用（注意 id 必須每個選項不一樣）：

   <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" id="navbar1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">選項1</a>
       <div class="dropdown-menu" aria-labelledby="navbar1">
           <a class="dropdown-item" href="#">子選項1</a>
           <a class="dropdown-item" href="#">子選項2</a>
       </div>
   </li>
   

8. 我們可以在<nav>中加入 p-sm-0 m-sm-0 讓導覽列在電腦螢幕上看起來瘦一點。

   <nav class="navbar navbar-expand-md  p-sm-0 m-sm-0">

9. 讓導覽列的選項置中，利用 .mx-auto 即可（即 margin-left: auto; margin-right: auto; 之意）：

   <ul class="navbar-nav mx-auto">