---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 31

## 練習使用元件

### 題目

請練習使用 [Bootstrap](https://bootstrap5.hexschool.com/docs/5.1/components/accordion/) 任何一個元件

需透過 Codepen 繳交 （載入 [Bootstrap CDN](https://bootstrap5.hexschool.com/docs/5.1/getting-started/introduction/#css)）

[使用範例](https://codepen.io/hexschool/pen/WNzELMo)

## 回報流程

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


<!-- 解答： -->

回報區
---

| Discord | CodePen / 答案 |
|:---------------:|:-------------------------------------------------------------------:|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/RwMyprR) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/dymKMQd) |
| Benson#6763 | [codePen](https://codepen.io/kumashow/pen/eYMKZwB) |
| Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/ZExROEB) |
| 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/wvmXWBV) |
| 咻蹦#1526 | [CodePen](https://codepen.io/emmasyu/pen/BarVKGb) |
| Clara Cai#7097 | [CodePen](https://codepen.io/Clara-Snowy/pen/KKoeMNM) |
| SrellaHsu #2687 | [CodePen](https://codepen.io/stella950114/pen/wvmXWgB?editors=1000) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/abYKZyY) |
| PeggyLiao#1552 | [CodePen](https://codepen.io/PeiJu-Liao/pen/yLKEJMg?editors=1100) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/RwMJRVO) |
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/eYMKzeG?editors=1100)|
|布魯諾#7239|[Codepen](https://codepen.io/bruno-yu/pen/qBoKNoJ)|
|WEI_RIO#9342|[codePenn](https://codepen.io/wei_wu/pen/jOzKrPb?editors=1000)|
|黑白兔#0684|[codePenn](https://codepen.io/johnny329/pen/LYdrZOg)|
|威0#6919|[Codepen](https://codepen.io/n0918679182/pen/GRxGqwg?editors=1010)|
|Potatolee#7749|[Codepen](https://codepen.io/potatoleee/pen/vYRrKqY)|
| LHchien33#6232 |[Codepen](https://codepen.io/lin_chien/pen/XWEYKLB)|
|JackC#0411|[Codepen](https://codepen.io/key0329/pen/wvmXzag)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/OJvERyb?editors=1010)|
|zera#6060|[codepen](https://codepen.io/zera-tseng/pen/PoRaGKp)|
|小諾#1866|[codepen](https://codepen.io/noichan/pen/OJvERbW)|
|CloThEs#7837|[codepen](https://codepen.io/CloThEsZ/pen/BarVLpR)|
| JarDar#6980 |[codepen](https://codepen.io/jardarpen/pen/MWVXjLx)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/QWmxGgP)
| azami#5986 |[CodePen](https://codepen.io/azami/pen/KKoegBx)|
| LinaChen#1796 |[CodePen](https://codepen.io/LinaChen/pen/ZExRBKE)|
| bonnieli1414#4906 |[CodePen](https://codepen.io/bonnieli1414/pen/qBoKqmR?editors=1100)|
| Fang #4680 |[Codepen](https://codepen.io/std95174/pen/QWmxGaR)|
| yuyu#6310 |[Codepen](https://codepen.io/yuyu0905/pen/yLKEVxN?editors=1100)|
| suihsilan#9485 |[Codepen](https://codepen.io/suihsilan/pen/WNzyoKq)|
| 雷雷#7844 |[Codepen](https://codepen.io/lei-yi-jie/pen/BarVWJd)|
| yo_yo#2678 |[Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/mdxKWXO)|
| kittyko#5951 |[Codepen](https://codepen.io/kittyko/pen/xxWzdEO)|
| Vera#5592 |[Codepen](https://codepen.io/skvera/pen/RwMJVmY)|
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/qBoKjLL) |
| Melon#0380 | [CodePen](https://codepen.io/BalaFang/pen/GRxGvmj) |
| Yunei#6323 | [CodePen](https://codepen.io/Yunei/pen/zYWaEov) |
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/qBoKPON)|
| Yuan962#5897 |[Codepen](https://codepen.io/Jasmine-Liao/pen/wvmXrQO)|
| RayChen#6088 | [CodePen](https://codepen.io/raychen1996/pen/eYMKGOw)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/ExERwBm?editors=1100)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/BarVJrd)|
|yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/BarVJGm)|
|ssozr#4680 | [codepen](https://codepen.io/ssozr/pen/MWVXQWR)|
| Hsiu#8767 | [CodePen](https://codepen.io/amy-hsiu/pen/poLKLby) |
| Arista#5802 | [CodePen](https://codepen.io/arista-hsieh/pen/KKoebwv) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/PoRaXvK) |
| christina#6185 |[Codepen](https://codepen.io/chrisc0210/pen/yLKEwJO)|
| 紙飛機 #1335 |[Codepen](https://codepen.io/paperplanea/pen/LYdraMX)|
|IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/GRxBgyq)|
|Vian#7338|[Codepen](https://codepen.io/vianwu31/pen/LYdBEoV)|
|WEI#0797|[Codepen](https://codepen.io/wei-z/pen/ExEpKbV)|
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/mdxjPjX)|
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/ExEpyGE) |
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/gOejRRE?editors=1100)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/wvmxepw)|
|我是泇吟 #5189|[CodePen](https://codepen.io/kljuqbxs/pen/WNzKXeB)|
|Amberhh #2465 |[CodePen](https://codepen.io/Amberhh/pen/bGvjYgP)|
|Henry#7386 |[CodePen](https://codepen.io/h1nr9/pen/YzajEOd)|
|鉦勝 #8333 |[CodePen](https://codepen.io/atckmax823/pen/OJvwwKP)|
| YU #0618 | [CodePen](https://codepen.io/yoken_/pen/VwXBGwR)|
| NeilLin#3009 | [CodePen](https://codepen.io/a0071421/pen/VwXBoYg)|
|kevin8349 #6131 |[CodePen](https://codepen.io/kun8349/pen/qBoMdRd)|
|QOO #8446 |[CodePen](https://codepen.io/QOOQOOQ/pen/oNqyQaJ)|
|hungya#0773 |[CodePen](https://codepen.io/hungya777/pen/WNzgvwz)|
|YI#0863 |[CodePen](https://codepen.io/YI0305/pen/BarONeO?editors=1100)|
|Tori#1248 |[CodePen](https://codepen.io/FlyTori/pen/OJvoyyB)|
|J_u_d_y#5993 | [Codepen](https://codepen.io/J_u_d_y/pen/NWYLGGJ) |
|piha#9987|[Codepen](https://codepen.io/pihahaha/pen/gOedMWB)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/eYMLKEX)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/poLOZez)
|aki|[codepen](https://codepen.io/aki168/pen/ZExqzJm)|
|Pony#6778|[Codepen](https://codepen.io/Pony0303/pen/jOzeOJE)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/eYMPEje?editors=1100)|
|𝓛𝓊𝒸𝓎#8635|[Codepen](https://codepen.io/lucygirl/pen/wvmYPZZ)|
|choubree#4350|[Codepen](https://codepen.io/BreeChou/pen/dymQMbr)|
|郭芙蘭#6374|[Codepen](https://codepen.io/flora_Kuo/pen/gOeQZKy?editors=1100)|
|Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/xxWMbNX?)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/eYMxvyp)|
Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/gOeqXNG)|
|allen#0876|[CodePen](https://codepen.io/sodarman/pen/BarMrBz)|
|Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/eYMXdeO)|
|Cream#3449|[CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/vYRPyzP)|
|mei#8421|[CodePen](https://codepen.io/Shila-Chen/pen/MWVRawo)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/ZExNzJG)|
|Van.CS #2067|[Codepen](https://codepen.io/fbacojji-the-selector/pen/zYWQRBG)|
|yuchenye#6119|[Codepen](https://codepen.io/yuchen/pen/JjLQJoJ)|
|Jamie Wu#9345|[CodePen](https://codepen.io/Wu220103/pen/bGvPLXZ)|
|jin.huang#4666|[CodePen](https://codepen.io/haha1196/pen/jOzjXmw?editors=1100)|
|Deborah#0033|[CodePen](https://codepen.io/deborah-tsai/pen/yLKmvPG)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/jOxPddB)|
|NathanJames#8120|[Codepen](https://codepen.io/ufo060204/pen/rNvOqMM)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/WNJGOLv)|