# 🏅 Day 39 - Bootstrap Navs and tabs

### 一、Bootstrap Navs and tabs 套件介紹

可先透過[官方文件](https://getbootstrap.com/docs/5.3/components/navs-tabs/)了解此元件內容。

Navs and tabs 中文為導覽與頁籤，上半部先介紹 Navs 內容，下半部會將導覽與頁籤做結合，當點擊導覽(Navs)時下方的頁籤(Tabs)便會轉換內容。

>這部分會使用到 JS 的套組，所以要將介紹內 JS 的 bundle 程式碼一同載入。
>```
>https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js
>```

### 二、Bootstrap Navs and tabs 套件使用

以下是官方文件內的[範例程式碼](https://getbootstrap.com/docs/5.3/components/navs-tabs/#javascript-behavior)

上方為 Navs 的部分，下方為 Tabs 的內容。

>其中最重要為按鈕連結內容的部分，是透過 data-bs-target(目標 ID) 與下方內容的 id 連結。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

連結區塊範例：

<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane"(!!連結的部分!!) type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>

<div class="tab-pane fade show active" id="home-tab-pane"(!!連結的部分!!) role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>

另外會注意到下方的 class 有設定 active ，這為設定預設開啟的內容。

## 任務內容

調整此[模板](https://codepen.io/jmimiding4104/pen/eYwGryX)，使 nav 與 tab-content 改為左右並排呈現，nav 區塊內按鈕為直向排列，點選 nav 按鈕時能正確呈現對應的內容，最終成果如附圖

>布局設定有 !!須設定處(布局設定)!! 之提醒，共有兩處，須記得修改完畢後移除
>Navs and tabs 共有十處(按鈕與內容本身各五處)需進行修改。


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/jmimiding4104/pen/dyBowMW
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | haojing |[Codepen](https://codepen.io/hjxu/pen/LYKePXL)|
| 2 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/abgEbxK) |
|3|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/NWZXPjj?editors=1010)|
| 4 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/poXpvNd?editors=1100) |
| 5 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/eYwymGj) |
| 6 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/poXpvpL?editors=1000) |
| 7 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/ZEdvYjq) |
| 8 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/QWXawZQ) |
| 9 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/VwJyLvK)|
| 10 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/OJezVJx) |
| 11 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/jOjYPdj) |
| 12 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/MWMrKyr) |
| 13 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/RwzxabK?editors=1100) |
| 14 | kawa | [Codepen](https://codepen.io/z83xji6/pen/BagJKqq?editors=1010) |
| 15 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/oNrpNmQ?editors=1100) |
| 16 | KUN. | [Codepen](https://codepen.io/barry91205/pen/jOjYrrE) |
| 17 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/ExBovBz) |
| 18 | wind | [Codepen](https://codepen.io/wind7y/pen/JjQMLoN) |
| 19 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/qBzpGKN) |
| 20 | Mike | [Codepen](https://codepen.io/mike2049/pen/jOjZPae?editors=1100) |
| 21 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/JjQpYJy) |
| 22 | xcx100 | [Codepen](https://codepen.io/c13026/pen/oNrEZem) |
| 23 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/qBzxVmj)|
| 24 | glen_69515 |[codepen](https://codepen.io/glenyaochih/pen/poXVEvv)|
| 25 | Enn |[codepen](https://codepen.io/enntang/pen/bGPMmRB?editors=1100)|
| 26 | anderson666 |[codepen](https://codepen.io/goodmanbuild/pen/WNqJWzN)|
| 27 | emmayo |[codepen](https://codepen.io/emmayo/pen/eYwKNPj)|
| 28 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/WNqyYrX) |
| 29 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/ZEdjQYg) |
| 30 | 咖 | [Codepen](https://codepen.io/daru-Ga/pen/gONByVo) |
| 31 | macihuang | [Codepen](https://codepen.io/macy1215/pen/gONqOZJ?editors=1100) |
| 32 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/wvLZzzL?editors=1100) |
| 33 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/poXBaJw) |
| 34 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/KKjjjvQ?editors=1100) |
| 35 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/BaXjaaJ) |
| 36 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/YPzdjLg?editors=1100) |

<!--
| No | Discord | [Codepen]() |
-->