19. 導覽

一、導覽頁籤

1. 導覽有兩種，一種是頁籤式（nav-tabs）的，一種是藥丸式（nav-pills）的。
2. 詳情：http://bootstrap.hexschool.com/docs/4.0/components/navs/#javascript-%E8%A1%8C%E7%82%BA
3. 我們直接拿範例（稍微簡化）來修改：

   <ul class="nav nav-tabs" id="myTab" role="tablist">
     <li class="nav-item">
       <a class="nav-link active" id="home-tab" data-toggle="tab" href="#內容1" role="tab" aria-controls="home" aria-expanded="true">選項1</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" id="profile-tab" data-toggle="tab" href="#內容2" role="tab" aria-controls="profile">選項2</a>
     </li>
   </ul>
   <div class="tab-content" id="myTabContent">
     <div class="tab-pane fade show active" id="內容1" role="tabpanel" aria-labelledby="home-tab">...</div>
     <div class="tab-pane fade" id="內容2" role="tabpanel" aria-labelledby="profile-tab">...</div>
   </div>

4. 上方<ul>是導覽列，其中的<li>就是導覽選項，利用href來連結到下方對應內容
5. 下方的<div>則是點選導覽選項對應的內容，必須設定id才能和導覽選項對應上。

二、調整導覽列

1. 預設是頁籤式的，我們將 .nav-tabs 改為 .nav-pills 即可換成藥丸式的。

2. 為了讓選項滿版，我們加入.nav-fill。

3. 順便改變底色，所以加入了.bg-secondary，使之呈現為灰色。

4. 讓他和上下有點距離，所以加入.my-2，設定邊距為2個空白空間。最後看起來像這樣：

   <ul class="nav nav-pills nav-fill bg-secondary my-2" id="myTab" role="tablist">
       <!--選項-->
   </ul>

三、調整選項

1. 要多一組選項，就要在上方<ul>中多一組<li>，同時，下方<div>也要多一組設定。
2. 上方導覽選項，例如：

   <li class="nav-item">
       <a class="nav-link text-white active" id="tab-0" data-toggle="tab" href="#tab-content-0" role="tab" aria-controls="tab-0" aria-expanded="true">綜合公告</a>
   </li>

3. 由於我們有改變底色為深色系，故將選項顏色利用.text-white設為白色，此外，可以根據需求修改href值，以便範下方內容對應。

四、調整對應內容

1. 下方內容區範例：

   <div class="tab-pane fade show active" id="tab-content-0" role="tabpanel" aria-labelledby="content-0-tab">
       <div w3-include-html="table.html"></div>
   </div>

2. 主要是修改id值，以便和上方選項對應。

3. 其內容可以直接寫在<div>中，此處為了精簡畫面，另做 table.html 來引入之。

五、快速產生