BootStarp4實做入門

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 來引入之。

五、快速產生

在 Visual Studio Code 中輸入b4-nav-tabs-pills-ul-variationEnter 可以快速產生導覽的語法,不過其中的 .nav-stacked 是 BootStrap3用的,在BS4中沒作用,故可以拿掉。