---
# System prepended metadata

title: "\U0001F3C5 Day 25 - 練習導入與使用元件"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 25 - 練習導入與使用元件

Bootstrap 是一個前端框架，提供許多預先定義好的工具樣式讓我們不必從頭撰寫，能有一個現成模板套用，提高開發效率。
這邊會練習導入 Bootstrap，並試著使用其中的元件功能。

### 題目

請練習載入 [Bootstrap CDN](https://getbootstrap.com/docs/5.3/getting-started/introduction/#cdn-links)，使用 Bootstrap 中的 [Buttons](https://getbootstrap.com/docs/5.3/components/buttons/) 元件，參考相關說明做出下圖內容：

>不同大小與不可點擊的按鈕

![](https://imgur.com/3TWzONg.png)

另外常用的部分是 [outline](https://getbootstrap.com/docs/5.3/components/buttons/#outline-buttons) 的形式，請依據上圖的形式再做出 outline 的樣式。

![](https://imgur.com/4C4u3aj.png)

>顏色的部分可以參考 [colors](https://getbootstrap.com/docs/5.3/utilities/colors/#colors) ，分別以 primary 、 secondary 與 danger 等等來調整。

需透過 Codepen 繳交



## 回報流程

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

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

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

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


回報區
---

|  #  | Discord | CodePen / 答案 |
|:---:|:-------:|:--------------:|
|  01  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/NPGGEXB?editors=1000) |
|  02  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/ogjjQdY) |
|  03  |  Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/LEppXxp) |
|  04  |  Katie  |[Codepen](https://codepen.io/Katiekatiehsu/pen/JoYYeBX?editors=1100) |
|  05  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=myeeQvp) |
|  06  | pastor |[Codepen](https://codepen.io/peter_hung/pen/KwddrBJ) |
|  07  | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/YPyydXY) |
|  08  | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/EaVVGYy) |
|  09  | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/LEppMyO) |
|10| Saika|[CodePen](https://codepen.io/saika4501/pen/gbaaqPY)|
|  11  | Saika|[CodePen](https://codepen.io/qsc002163/pen/JoYYxEm?editors=1010)|
|  12  | 老屠|[CodePen](https://codepen.io/fsgfxvlb-the-selector/pen/NPGGoNr)|
|  13  | Jenna |[CodePen](https://codepen.io/abiscc14/pen/EaVVMKB)|
|  14  | 柔術小子 |[CodePen](https://codepen.io/Li-Lee-Everything-is-PM/pen/XJmmOBP?editors=1010)|
|  15  | Huang Eagle |[CodePen](https://codepen.io/YuCi/pen/QwjjoXo)|
|  16  | 平平 |[CodePen](https://codepen.io/ypinpin/pen/ogjjRWV)|
|  17  | Kiku |[CodePen](https://codepen.io/Kiku0110/pen/JoYYqGB?editors=1100)|
|  18  | 7Lun |[CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/WbQQqMK)|
|  19  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/bNVVPrv) |
|  20  |  Nooooora  |[Codepen](https://codepen.io/Nora-Ch/pen/KwddOqK) |
|  21  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/bNVEbNV?editors=1000) |
|  22  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/empJOLK) |
 |  23  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/ByojzWw) |
|  24  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/GgpojRx) |
|  25  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/zxvrKWZ) |
|  26  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/azvdmxV) |
|  27  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/WbQroox?editors=1100) |
|  28  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/LEpGWNy?editors=1100) |
|  29  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/bNVERbR) |
|  30  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/QwjyOVV) |
|  31  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/qEObYyP?editors=1100) |
|  32  | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/MYaKZNj)|
|  33  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/QwjyYZp) |
|  34  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/yyYOVXg) |
|  35  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/jEbqaeK) |
|  36  |  Hao  |[Codepen](https://codepen.io/Howell/pen/WbQwWeJ) | 
| 37 | water | [Codepen](https://codepen.io/wateruby/pen/yyYJVxV)|
| 38 | suemma | [Codepen](https://codepen.io/suemma/pen/ByozZao)|
| 39 | B | [Codepen](https://codepen.io/Babel777/pen/dPYOrRj)|
| 40 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/ZYbLXMz?editors=1100)|
|  41  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/ZYbyjVz?editors=1100) |
|  42  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/ByodaBR) |
|  43  | 牛奶嘎 |[Codepen](https://codepen.io/Joyce-Niu/pen/GgpOeKb) |
|  44  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/EaVpdLG) |
|  45  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/MYaPXWy) |
|  46  |  cindy  |[Codepen](https://codepen.io/a50134/pen/qEOwvWa) |
|  47  |  Doreen翠翠翠  |[Codepen](https://codepen.io/cuei-sian-Wang/pen/VYvJLZO) |
|  48  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/KwVjrYa?editors=1000) |

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