# 🏅 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/) 元件，參考相關說明做出下圖內容：

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


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


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

需透過 Codepen 繳交

## 回報流程

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


<!-- 解答： 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](連結) | -->