---
# System prepended metadata

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

---

# 🏅 Day 28 - 元件與通用類別 I

元件與通用類別是 Bootstrap 中經常用到的工具，提供許多預設模板與樣式讓我們能夠直接套用，不需從 0 開始撰寫樣式，提升開發效率。

今天要請同學嘗試將元件 [Card](https://getbootstrap.com/docs/5.3/components/card/) 、通用類別 [border](https://getbootstrap.com/docs/5.3/utilities/borders/#border)、[spacing](https://getbootstrap.com/docs/5.3/utilities/spacing/#margin-and-padding) 組合在一起，如圖所示：
![](https://hackmd.io/_uploads/rJsE0HENxe.png)




### 題目
請複製此 [CodePen](https://codepen.io/fhljksmg-the-styleful/pen/myJzYNK?editors=1000)，並依照下方提示修改 `...` 的部分

作業提示：
* 圖片與文字需間格 16px ，第一段文字需與第二段文字間格 8px ，第二段文字與下方 tags 間隔 16px 。


## 回報流程

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

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

<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/VYLEOxW
 -->


回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | Saika | [Codepen](https://codepen.io/saika4501/pen/KwdzrMX?editors=1000) |
| 02 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/QwjNgox) |
|  03  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/pvjyQNp) |
| 04 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/XJmdyey)|
| 05  |  Pastor  |[Codepen](https://codepen.io/peter_hung/pen/myePQqP) |
|  06 |  cks40660 |[Codepen](https://codepen.io/CKS40660/pen/raOeQLK) |
| 07 |  Jerome |[Codepen](https://codepen.io/qsc002163/pen/LEpNXME?editors=1000) |
|  08  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/gbarQJR?editors=1000) |
|  09  |  Jenna  |[Codepen](https://codepen.io/abiscc14/pen/jEbqXEv) |
|  10  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/ByoKGvd) |
|  11  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=VYvaqLm) | 
|  12  |  Huang Eagle  |[Codepen](https://codepen.io/YuCi/pen/MYayLqm) | 
|  13  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/empZxKE) |
|  14  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/yyYOwqq?editors=1100) |
|  15  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/PwPNLMK?editors=1000) |
|  16  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/azvNrOW) |
|  17  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/OPyNeVM) |
|  18  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/WbQwVZY) | 
|  19  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/ZYbWgVG) |
|  20 |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/yyYJBYY?editors=1100) |
|  21  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/jEbrNBP?editors=1100) |
|  22  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/WbQxeJQ?editors=1000) |
|  23  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/EaVyxdJ?editors=1100) | 
|  24  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/RNWRwxW?editors=1100) |
|  25  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/zxvBYmb) |
|  26  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/EaVyxLM) |
|  27  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/QwjEwzP?editors=1100) |
| 28 | Nooooora | [codepen](https://codepen.io/Nora-Ch/pen/YPyWpxO?editors=1000)
|  29  |  Katie  |[Codepen](https://codepen.io/Katiekatiehsu/pen/ByozREy?editors=1100) | 
|  30  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/QwjEgBO) | 
|  31  |  suemma  |[Codepen](https://codepen.io/suemma/pen/xbwOrNv?editors=1000) | 
|  32  |  Hao  |[Codepen](https://codepen.io/Howell/pen/LEpZQNz) |
|  33  |  Marco  |[Codepen](https://codepen.io/MarcoChiu/pen/XJmpwKQ) |
|  34  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/wBKJLZL?editors=1100) |
|  35  | KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/YPyNMZo?editors=1100) |
|  36  | B  |[Codepen](https://codepen.io/Babel777/pen/ogjeXMr) |
|  37  | NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/raOGZaE?editors=1100) |
|  38  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/VYvrMvQ?editors=1000) |
|  39  |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/gbaXJMd) |
|  40  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/Ggpxmwx) |
|  41  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/XJmxYNg) |
|  42  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/VYvENJQ) |
|  43  |  cindy  |[Codepen](https://codepen.io/a50134/pen/gbaJRvj)|
|  44  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/azdzMxP?editors=1000)|
|  45  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/dPGxorR?editors=1000)|

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