---
# System prepended metadata

title: "\U0001F3C5 Day 29 - 元件與通用類別 II"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 29 - 元件與通用類別 II

延續昨日主題，今天要繼續練習 Bootstrap 元件與通用類別的運用。

### 題目

練習 Bootstrap [元件](https://getbootstrap.com/docs/5.3/components/accordion/)和 [通用類別](https://getbootstrap.com/docs/5.3/utilities/colors/#colors) 的組合，如圖：
![image](https://hackmd.io/_uploads/H1RDpUNNll.png)


請複製下方 HTML 模板，修改 `...` 的部分
HTML
```htmlembedded=
<div class="container mt-3">
  <div class="accordion" id="accordionExample">
    <div class="...">
      <h2 class="...">
        <button class="accordion-button bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <span class="me-2">Q.</span> 一對一諮詢是怎麼進行的？需要準備什麼嗎？
        </button>
      </h2>
      <div id="collapseOne" class="... collapse show" data-bs-parent="#accordionExample">
        <div class="...">
          <span class="... fw-bold me-2">A.</span> 諮詢通常採 Google Meet 或 Zoom，時長約 30 分鐘。我們建議你在預約前先簡單整理目前的狀態、遇到的困難、或想達成的目標。如果你不確定，顧問也會從對話中引導你探索，無需擔心準備不夠。
        </div>
      </div>
    </div>
  </div>
</div>
```
> 需透過 Codepen 繳交 （載入 [Bootstrap CDN](https://getbootstrap.com/docs/5.3/getting-started/introduction/#cdn-links)）


## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/KwpGjgp?editors=1000
 -->


回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
|  01  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/raOLMXe) |
|  02  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/myeEOJj) |
|  03  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/WbQxGqW) | 
|  04  | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/ByozQWe)|
|  05  |  Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/ByozQav) |
|  06  |  登登登 |[Codepen](https://codepen.io/Duncanin/pen/RNWRoge) |
|  07  | Noooora | [Codepen](https://codepen.io/Nora-Ch/pen/MYaebQb)|
|  08  | Jerome | [Codepen](https://codepen.io/qsc002163/pen/pvjbNZE?editors=1000)|
|  08  | 地瓜 | [Codepen](https://codepen.io/ChippyYU/pen/EaVyNGQ?editors=1010)|
|  09  |  Jenna  |[Codepen](https://codepen.io/abiscc14/pen/EaVyZPp) |
|  10  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/LEpZWyZ?editors=1010) |
|  11  |  Pastor  |[Codepen](https://codepen.io/peter_hung/pen/WbQxpZa) |
|  12  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/ogjLWRQ?editors=1100) |
|  13  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/YPyWQyb) |
|  14  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=zxvBzjM) | 
|  15  |  Katie  |[Codepen](https://codepen.io/Katiekatiehsu/pen/KwdMqyy) | 
|  16  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/bNVeRPY?editors=1100)| 
|  17  |  suemma  |[Codepen](https://codepen.io/suemma/pen/ZYbOJbw)| 
|  18  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/MYaevOd) |
 |  19  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/RNWRLEd) | 
 |  20  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/ByozmEZ?editors=1100) |
|  21  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/yyYJpyR) |
|  22  |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/empzVqG) |
|  23  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/ZYbOvdY?editors=1000) |
|  24  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/LEpZmzZ?editors=1000) |
|  25  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/XJmKOrX?editors=1100) |
|  26  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/ogjzvje) | 
|  27  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/QwjKymV?editors=1000) |
|  28  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/NPGRrKq) |
|  29  |  Hao  |[Codepen](https://codepen.io/Howell/pen/dPYpmJr) |
|30|Saika|[CodePen](https://codepen.io/saika4501/pen/pvjEGqj)|
|  31  |  Marco  |[Codepen](https://codepen.io/MarcoChiu/pen/pvjRmPQ) |
|  32  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/MYamPeQ?editors=1000) |
|  33  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/ByodaLw) |
|  34  |  B  |[Codepen](https://codepen.io/Babel777/pen/empENbj) |
|  35  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/azvLadO?editors=1100) |
|  36  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/ByoJBPg?editors=1000) |
|  37  |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/pvjpReP) |
|  38  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/raOdmbx) |
|  39  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/wBKYXPB) |
|  40  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/empxJqq) |
|  41  |  cindy  |[Codepen](https://codepen.io/a50134/pen/qEOGXNo) |
|  42  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/QwywPLq?editors=1000) |
|  43  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/QwyebRP) |

<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->