XOOPS輕鬆架 - 線上書籍

:::

BootStarp4實做入門
==============

### 一、導覽頁籤

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 來引入之。
 
### 五、快速產生

<div class="alert alert-info">在 Visual Studio Code 中輸入`b4-nav-tabs-pills-ul-variation`按 <kbd>Enter</kbd> 可以快速產生導覽的語法，不過其中的 .nav-stacked 是 BootStrap3用的，在BS4中沒作用，故可以拿掉。</div>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D965

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器