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

## 元件與通用類別 II

### 題目

練習 Bootstrap [元件](https://bootstrap5.hexschool.com/docs/5.1/components/card/)和 [通用類別](https://bootstrap5.hexschool.com/docs/5.1/utilities/borders/) 的組合，如圖：

提示：
* card 可以使用通用類別的屬性加上 [陰影](https://bootstrap5.hexschool.com/docs/5.1/utilities/shadows/)、[無圓角](https://bootstrap5.hexschool.com/docs/5.1/utilities/borders/)
* [按鈕](https://bootstrap5.hexschool.com/docs/5.1/components/buttons/) 可以使用 [通用類別的 flex 屬性](https://bootstrap5.hexschool.com/docs/5.1/utilities/flex/)分別讓按鈕可以在同一排的兩側，一個具有危險意義的紅色＋框線樣式、一個是成功意義的綠色＋實心樣式
* 以上都不需要另外寫 CSS、不需載入 CSS Reset

HTML

<div class="container py-3">
    <div class="card ...">
     <img src="https://getbootstrap.com/docs/4.5/assets/img/[e-mail]" class="card-img-top">
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
       <div class="...">
         <a href="#" class="...">移除收藏</a>
         <a href="#" class="...">加入購物車</a>
       </div>
     </div>
    </div>
</div>

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

## 回報流程

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


<!-- 解答：https://codepen.io/hexschool/pen/poLrBGW -->

回報區
---

| Discord | CodePen / 答案 |
|:-----------------:|:-------------------------------------------------------------------:|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/KKoRLaj) |
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/abYKVgR) |
| Clara Cai#7097 | [CodePen](https://codepen.io/Clara-Snowy/pen/mdxKovN) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/OJvwKRy?editors=1010) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/oNqMKzm) |
| NeilLin#3009 | [CodePen](https://codepen.io/a0071421/pen/PoRBMKZ?editors=1010) |
| 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/zYWLgwa) |
| WEI_RIO#9342 | [CodePen](https://codepen.io/wei_wu/pen/PoRBMEN?editors=1000) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/jOzpgaw) |
| bonnieli1414#4906 | [codePen](https://codepen.io/bonnieli1414/pen/dymjxex?editors=1100) |
| PeggyLiao#1552 | [CodePen](https://codepen.io/PeiJu-Liao/pen/poLZMQa?editors=1000) |
| zera#6060 | [codepen](https://codepen.io/zera-tseng/pen/NWYBXgp) |
| christina#6185 | [codepen](https://codepen.io/chrisc0210/pen/BarPXvW) |
| JackC#0411 | [codepen](https://codepen.io/key0329/pen/RwMBXvr) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/ZExjgPM) |
| 咻蹦#1526 | [CodePen](https://codepen.io/emmasyu/pen/XWEBvLO) |
| Karol-Kuo#5287 | [CodePen](https://codepen.io/ting-yu-kuo/pen/xxWaKVK?editors=1000) |
| L0F0#8733 | [CodePen](https://codepen.io/l0f0/pen/YzaOKaZ) |
| 小諾#1866 | [CodePen](https://codepen.io/noichan/pen/BarOBqV) |
| int#7518 | [Codepen](https://codepen.io/intHuang/pen/wvmEwZY?editors=1010) |
| ssozr#4680 | [codepen](https://codepen.io/ssozr/pen/LYdJPvW) |
| 威0#6919 | [Codepen](https://codepen.io/n0918679182/pen/vYRzYNd?editors=1000) |
| Vera#5592 | [Codepen](https://codepen.io/skvera/pen/oNqPNwp) |
| Yuna Huang#2692 | [Codepen](https://codepen.io/Yuna1002/pen/WNzgNXe) |
| WEI#0797 | [Codepen](https://codepen.io/wei-z/pen/MWVqgJZ) |
| 我是泇吟#5189 | [CodePen](https://codepen.io/kljuqbxs/pen/wvmEvQw) |
| CloThEs#7837 | [CodePen](https://codepen.io/CloThEsZ/pen/GRxXRzL) |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/QWmVwLE?editors=1000) |
| LHchien33#6232 | [CodePen](https://codepen.io/lin_chien/pen/OJvoPRV) |
| Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/MWVqYLX) |
| Melon#0380 | [CodePen](https://codepen.io/BalaFang/pen/YzaOXKw) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/MWVqwgq) |
| JarDar#6980 | [codepen](https://codepen.io/jardarpen/pen/oNqPXjX) |
| azami#5986 | [CodePen](https://codepen.io/azami/pen/VwXGLWK) |
| Henry#7386 | [CodePen](https://codepen.io/h1nr9/pen/RwMYPLV) |
| suihsilan#9485 | [CodePen](https://codepen.io/suihsilan/pen/abYaOPd?editors=1100) |
| Benson#6763 | [CodePen](https://codepen.io/kumashow/pen/OJvoyEY?editors=1100) |
| Yunei#6323 | [CodePen](https://codepen.io/Yunei/pen/qBoMZGq) |
| 鉦勝 #8333 | [CodePen](https://codepen.io/atckmax823/pen/MWVqewW) |
| RayChen#6088 | [CodePen](https://codepen.io/raychen1996/pen/QWmVEbP) |
| Hsiu#8767 | [CodePen](https://codepen.io/amy-hsiu/pen/poLOjpj) |
| Potatolee#7749 | [CodePen](https://codepen.io/potatoleee/pen/PoRdzaL) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/poLObxy) |
| YU #0618 | [Codepen](https://codepen.io/yoken_/pen/KKoxMRd) |
| Sentiments#4883 | [codepen](https://codepen.io/Sentiments/pen/xxWaOpL?editors=1010) |
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/PoRdGpq) |
| 連小艾#0791 | [Codepen](https://codepen.io/bolaslien/pen/NWYLbjY?editors=1000) |
|yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/poLOeKd)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/bGvxWLM)|
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/GRxBOMz?editors=1010)|
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/VwXGyKg)|
| 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/oNqPEBX)|
| YI#0863 | [Codepen](https://codepen.io/YI0305/pen/dymqdvG)|
| kevin8349 #6131 | [Codepen](https://codepen.io/kun8349/pen/PoRdRxL)|
| yo_yo#2678 | [Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/JjLaLaO?editors=1000)|
| 雷雷#7844 | [Codepen](https://codepen.io/lei-yi-jie/pen/rNdZvYJ)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/VwXGdRp)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/mdxGGRZ)
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/JjLaape)|
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/QWmZwWb)|
|Pony#6778|[Codepen](https://codepen.io/Pony0303/pen/gOeBPpy?editors=1100)|
|IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/QWmZpEj)|
|𝓛𝓊𝒸𝓎#8635|[Codepen](https://codepen.io/lucygirl/pen/MWVPrQo)|
|QOO#8446|[Codepen](https://codepen.io/QOOQOOQ/pen/LYdggOP?editors=1100)|
|阿蘇#8531|[Codepen](https://codepen.io/susu8327/pen/Barqqbm?editors=1010)|
|Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/mdxzQOq)|
|choubree#4350|[Codepen](https://codepen.io/BreeChou/pen/QWmJGzQ)|
|郭芙蘭#6374|[Codepen](https://codepen.io/flora_Kuo/pen/WNzYpgr?editors=1010)|
|Fang#4680|[Codepen](https://codepen.io/std95174/pen/eYMQQVq?editors=1000)|
|紙飛機 #1335|[Codepen](https://codepen.io/paperplanea/pen/qBoQQgR)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/qBoQvOE)|
| J_u_d_y#5993 | [Codepen](https://codepen.io/J_u_d_y/pen/rNdPgrY?editors=1100) |
| Rena#6249 | [Codepen](https://codepen.io/aureate0116/pen/QWmodRr) |
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/jOzJawL)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/abYxyxd?editors=1010)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/GRxLxXp)|
|Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/vYRMmYW?editors=1000)|
|Van.CS|[Codepen](https://codepen.io/fbacojji-the-selector/pen/KKoLQGP)|
|yuchenye#6119|[Codepen](https://codepen.io/yuchen/pen/JjLQJEO)|
|jin.huang#4666|[Codepen](https://codepen.io/haha1196/pen/eYMwxdo)|
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/wvmLVaK)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/rNdXzQr)|
|Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/RwMXMoM)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/YzLXMxx)|
|NathanJames#8120|[Codepen](https://codepen.io/ufo060204/pen/jOxbQLL)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/VwxKMKa)|