# 🏅 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 連結。 ```html <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> ``` 連結區塊範例： ```html <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 共有十處(按鈕與內容本身各五處)需進行修改。 ![image](https://hackmd.io/_uploads/SJ_r6nbjC.png) ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： 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]() | -->