---
# System prepended metadata

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

---

### 題目

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



## 回報流程

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

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

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

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


回報區
---


| # |     Discord     |                           CodePen / 答案                            |
|:---------------:|:-------------------------------------------------------------------:| :--: |
| 1 |Moreene|[CodePen](https://codepen.io/Moreene/pen/vYQPOYP)|
| 2 | hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/mdQoJeZ)|
| 3 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/QWJobbK) |
| 4 | Ann Chou | [Codepen](https://codepen.io/annchou_illu/pen/QWJobdd) |
| 5 | townyuan | [Codepen](https://codepen.io/townyuan/pen/ExOMjWp) |
| 6 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/yLQwNbz) |
| 7 | deli0529 | [Codepen](https://codepen.io/delichaomoon/pen/gOQEpmb) |
| 8 | m_m | [Codepen](https://codepen.io/minnn7716/pen/bGQZdRw) |
| 9 | Yu | [Codepen](https://codepen.io/yuch3n_chen/pen/NWEJqrr) |
| 10 | awei | [Codepen](https://codepen.io/hong-wei/pen/LYXaVmo?editors=1100) |
| 11 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/MWzxwoO) |
| 12 | billy_ti | [Codepen](https://codepen.io/Ti-Show/pen/zYMbGjm?editors=1000) |
| 13 | Morning | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/ZEmPGRo) |
| 14 | shcopy | [Codepen](https://codepen.io/shcopy/pen/yLQwNRK) |
| 15 | Uli | [Codepen](https://codepen.io/uli1313/pen/xxQBGdy?editors=1100) |
| 16 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/LYXaVXK) |
| 17 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/poQYJqa) |
| 18 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/poQYJXV?editors=1000) |
| 19 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/PoxLqLb?editors=1100) |
| 20 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/rNQROOP) |
| 21 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/dyQroay) |
| 22 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/PoxLPmJ) |
| 23 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/bGQZVzm) |
| 24 | Sinsaki225 | [Codepen](https://codepen.io/a8322342/pen/YzRgymr) |
| 25 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/dyQrGNJ) |
| 26 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/MWzxyyv) |
| 27 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/wvQOGKK) |
| 28 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/LYXaNjq) |
| 29 | Kimi | [Codepen](https://codepen.io/kimihu91/pen/WNYmwmZ) |
| 30 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/JjezKPg) |
| 31 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/RwqdRNR) |
| 32 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/ExOMyKB) |
| 33 | Aritan1931 | [Codepen](https://codepen.io/Aritan/pen/GRweqQv) |
| 34 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/zYMbBpO) |
| 35 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/JjezKZG?editors=1100) |
| 36 | wind | [Codepen](https://codepen.io/wind7y/pen/LYXaZwW) |
| 37 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/LYXabBo) |
| 38 | Eden | [Codepen](https://codepen.io/iseden/pen/qBQvqMw)|
| 39 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/abQMBrM) |
| 40 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/vYQPyPO) |
| 41 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/eYQXBXL?editors=1100) |
| 42 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/VwVRPPa) |
| 43 | rjjq | [Codepen](https://codepen.io/rjjq/pen/dyQrWdE) |
| 44 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/MWzxmxG) |
| 45 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/QWJoaBW) |
| 46 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/VwVRyoE) |
| 47 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/MWzxQOO?editors=1000) |
| 48 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/oNQVyqV) |
| 49 | Long | [Codepen](https://codepen.io/Loonng/pen/oNQVPpo) |
| 50 | Randy | [Codepen](https://codepen.io/landy510/pen/jOQJdrr?editors=1000) |
| 51 | tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/vYQPMQa) |
| 52 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/xxQBvzr) 
| 53 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/xxQewZe) |
| 54 | Renee Wang | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/BaGEoYw) |
| 55 | Martin | [Codepen](https://codepen.io/markyourpage/pen/MWzRaXZ) |
| 56 | runweiting | [Codepen](https://codepen.io/weiting14/pen/yLQrYqQ) |
| 57 | .icesam | [Codepen](https://codepen.io/icesam/pen/zYMXvgx) |
| 58 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/mdQgPqZ) |
| 59 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/ZEmZBXJ) |
| 60 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/yLQrKxR) |
| 61 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/dyQLeYN) |
| 62 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/yLQrqaK) |
| 63 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/vYQMaYB) |
| 64 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/rNQbZPL) |
| 65 | Vic_liou | [Codepen](https://codepen.io/allenliou-java/pen/WNYWggB) |
| 66 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/WNYabqJ) |
| 67 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/QWJRGqj) |
| 68 | Lianne._. |[Codepen](https://codepen.io/Elaina-L/pen/vYQwPBM?editors=1100) |
| 67 | shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/YzRopMR) |
| 68 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/jOQjmaO) |
| 69 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/gOQNQOJ) |
| 70 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/yLQZZEK) |
| 70 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/zYMgYpW) |
| 71 | 郭芙蘭 ＃6374| [Codepen](https://codepen.io/flora_Kuo/pen/RwqXWbq) |
| 72 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/XWorrNW) |
| 73 | SKey | [Codepen](https://codepen.io/Dale-Chien/pen/ExGYYMN) |
| 74 |KC_8685|[Codepen](https://codepen.io/cathy7411/pen/vYvBzJY)|
| 75 | WA | [Codepen](https://codepen.io/ldddl/pen/wvRvJBa) |
| 76 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/RwEwJvZ)
| 77 | cura | [Codepen](https://codepen.io/curalin/pen/LYMVLpG)
| 78 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/bGOErdj) |
| 79 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/oNJbqbK) |
| 80 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/GRPoGpz) |
| 81 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/VwqaYKp) |
| 82 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/NWeNNLx) |
| 83 | .rainielin | [Codepen](https://codepen.io/Yunchian-Lin/pen/vYvKWzY) |
| 84 | ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/NWevjNq) |
| 85 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/eYbVyKP) |
| 86 | 楓 | [Codepen](https://codepen.io/maplestartend/pen/RwdNyOq) |

---

- 快速複製格式：

```markdown!
| 0 | user | [Codepen]() |
```