🏅 Day 39 - Bootstrap Navs and tabs

一、Bootstrap Navs and 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 套件使用

以下是官方文件內的範例程式碼

上方為 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 ，這為設定預設開啟的內容。

任務內容

調整此模板，使 nav 與 tab-content 改為左右並排呈現，nav 區塊內按鈕為直向排列，點選 nav 按鈕時能正確呈現對應的內容，最終成果如附圖

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

回報流程

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

回報區

#	Discord	CodePen / 答案
1	haojing	Codepen
2	hsiu8767	Codepen
3	Hailey	Codepen
4	Ariel	Codepen
5	tim	Codepen
6	NocabWang(培根)	Codepen
7	Dolce_墨	Codepen
8	Kaya	Codepen
9	邵	Codepen
10	陳小廷	Codepen
11	Kiwi	Codepen
12	Mars	Codepen
13	Sonia	Codepen
14	kawa	Codepen
15	泊岸	Codepen
16	KUN.	Codepen
17	毛巾	Codepen
18	wind	Codepen
19	Sammy	Codepen
20	Mike	Codepen
21	PoWei	Codepen
22	xcx100	Codepen
23	ya_meow	Codepen
24	glen_69515	codepen
25	Enn	codepen
26	anderson666	codepen
27	emmayo	codepen
28	zaoannihao	Codepen
29	yaoling.liang	Codepen
30	咖	Codepen
31	macihuang	Codepen
32	chris	Codepen
33	Jainee	Codepen
34	Amy(咂摳)	Codepen
35	Jack	Codepen
36	KOMATSU PEI	Codepen