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

### 題目

請練習使用 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 繳交 （載入 [Bootstrap CDN](https://getbootstrap.com/docs/5.3/getting-started/introduction/#cdn-links)）

## 回報流程

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


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

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

回報區
---

| # | Discord | CodePen / 答案 |
|:---:|:-------:|:--------------:|
| 01 | Jainee |[ Codepen](https://codepen.io/Jainee0110/pen/xxoEjVa) |
| 02 | Mars |[ Codepen](https://codepen.io/MarsKuo/pen/oNrZaKg) |
| 03 | n913239 | [Codepen](https://codepen.io/n913239/pen/vYqxQEK?editors=1100) |
| 04 | han | [Codepen](https://codepen.io/iamHanCheng/pen/jOjBQNz) |
| 05 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/abgJQde) |
| 06 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/Porpjvd) |
|07|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/oNrZQZx)|
| 08 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/rNEyQjg) |
| 09 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/PorpxmJ) |
| 10 | yoishere | [Codepen](https://codepen.io/yoishere/pen/yLdMQBq) |
| 11 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/rNEyQKB) |
| 12 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/rNEyoBO?editors=1010)|
| 13 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/MWMpZja) |
| 14 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/MWMpZoK) |
| 15 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/MWMpLYo) |
| 16 | Kai | [Codepen](https://codepen.io/beginneraboutlife116/pen/qBzrgGe?editors=1000) |
| 17 | kawa | [Codepen](https://codepen.io/z83xji6/pen/MWMpxGd) |
| 18 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/ExBWJag) |
| 19 | KUN. | [Codepen](https://codepen.io/barry91205/pen/oNrZRMr) |
| 20 | Jim | [Codepen](https://codepen.io/JimChou/pen/MWMpddB) |
| 21 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/MWMpMKP?editors=1010) |
| 22 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/mdZWNmG?editors=1100) |
| 23 | GAVI | [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/ExBWqzo?editors=11000)|
| 24 | haojing | [Codepen](https://codepen.io/hjxu/pen/ZEdKEvZ)|
| 25 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/rNEmOWR) |
| 26 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/RwzpzKK?editors=1000) |
| 27 | Mike | [Codepen](https://codepen.io/mike2049/pen/abgWNBK?editors=1100) |
| 28 | MY | [Codepen](https://codepen.io/ahmomoz/pen/gONWmVJ) |
| 29 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/dyBWZoP) |
| 30 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/yLdbvKz) |
| 31 | wind | [Codepen](https://codepen.io/wind7y/pen/QWXvmOx) |
| 32 | kaka_945 | [Codepen](https://codepen.io/kay945/pen/VwJbxYW) |
| 33 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/mdZmLga)|
| 34 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/rNEmovL?editors=1000) |
| 35 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/MWMmZYM) |
| 36 | PoWei#8484 | [Codepen](https://codepen.io/Po-Wei-Lai/pen/WNqjVjm) |
| 37 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/ZEdypob) |
| 38 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/LYKLyLB) |
| 39 | xcx100 | [Codepen](https://codepen.io/c13026/pen/zYVzjMK) |
| 40 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/RwzgJJm) |
| 41 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/qBzjQqw) |
| 42 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/rNEwRav) |
| 43 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/bGPRZaR?editors=1010) |
| 44 | glen_69515 |[Codepen](https://codepen.io/glenyaochih/pen/zYVzXBY)|
| 45 | ss585801 |[Codepen](https://codepen.io/ss585801/pen/gONmQNK?editors=1000)|
| 46 | Toung |[Codepen](https://codepen.io/Toung/pen/OJejKov)
| 47 | emmayo |[Codepen](https://codepen.io/emmayo/pen/oNrGqxa)
| 48 | 俊 |[Codepen](https://codepen.io/jun12079/pen/XWLePvJ)
| 49 | Theodore0812 |[Codepen](https://codepen.io/GustavoFringgg/pen/wvLrYPN?editors=1000)
| 50 | Emma | [Codepen](https://codepen.io/Emma0919/pen/wvLrQWB) |
| 51 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/NWZaZGP) |
| 52 | Joanne hu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/jOjYpdr) |
| 53 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/wvLpVVe)|
| 54 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/OJeQVov) |
| 55 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/abgqVpB) |
| 56 | Enn | [Codepen](https://codepen.io/enntang/pen/BagrWae) |
| 57 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/WNqzWpb) |
| 58 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/NWZzmgJ)|
| 59 | OSN |[Codepen](https://codepen.io/osncodepen/pen/zYVLWEe)|
| 60 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/XWLGJVZ?editors=1000) |
| 61 | 深海 | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/zYVXxWP) |
| 62 | Lotte | [Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/ZEdgoKN?editors=1000) |
| 63 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/ExqYbPQ) |
| 64 | zen | [Codepen](https://codepen.io/zen742937/pen/poMzQBp) |
| 65 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/vYowWRz) |
| 66 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/gbOdJxJ) |

<!--)
| No | Discord | [Codepen]() |
-->