---
tags: 網頁切版直播班 - 2022 夏季班
---
# 第五週小組任務 - 切版班 12 組
> 討論日期及時間 > 2022/08/06 20:30-23:00
>
**組員參與名單(7/10)：**
* christina#6185
* yuyu#6310
* hungya#0773
* yichih#6223
* Wei-Ting#7691
* Winnie Wu#5468
* DoraHuang#8223

## 問題
### 任務一：請每個小組討論成員，試著載入 BS5 ，並作出 [modal 效果](https://bootstrap5.hexschool.com/docs/5.1/components/modal/#scrolling-long-content)
答：

| Name | Codepen |
| -------- | -------- |
| christina#6185 |[ Link ](https://codepen.io/chrisc0210/pen/OJvZEvd) |
| hungya#0773 |[ Link ](https://codepen.io/hungya777/pen/dymemWa?editors=1000) |
| yuyu#6310 |[ Link ](https://codepen.io/yuyu0905/pen/dymeKQe?editors=1010) |
| Wei-Ting#7691 |[ Link ](https://codepen.io/hellowei-ting/pen/dymeKaK) |
| Winnie Wu#5468 |[ Link ](https://codepen.io/Pooh-Wu/pen/jOzxKJb?editors=1000) |

### 任務二：討論 HTML 裡的表格標籤(table、th、tr、td)的用法，請試著做出[設計稿](https://xd.adobe.com/view/ea9c3e28-6d25-42cb-b6a5-1571c1707f05-bfcf/screen/96276e44-04d1-43be-98d3-95c6d71c6fc7/specs/)裡面的表格設計，並提供 codepen 來檢視

答：

| Name | Codepen |
| -------- | -------- |
| yuyu#6310 |[ Link ](https://codepen.io/yuyu0905/pen/OJvZwyL?editors=1010) |
| christina#6185 |[ Link ](https://codepen.io/chrisc0210/pen/KKoReBp) |
| hungya#0773 |[ Link ](https://codepen.io/hungya777/pen/PoReRdZ?editors=1100) |

> [bootstrap 表格](https://getbootstrap.com/docs/5.2/content/tables/#overview)
> [icon](https://material.io/tools/icons/?style=baseline)
> [HTML表格的基礎](https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Tables/Basics#%E4%B8%BB%E5%8B%95%E5%AD%B8%E7%BF%92_%E8%A1%A8%E6%A0%BC%E6%A8%99%E9%A0%AD)

### 任務三：討論第五週版型該怎麼做

答：

1. 討論hover、版型如何切



---

2. 討論modal


>modal裡收合功能
> [Accordion](https://getbootstrap.com/docs/5.2/components/accordion/)

---
3. 討論Assignment右下角如何切

>頭像
> [邊框 (Borders)](https://bootstrap5.hexschool.com/docs/5.1/utilities/borders/)


>按鈕摺疊
> [折疊 (Collapse)](https://bootstrap5.hexschool.com/docs/5.1/components/collapse/)

> 可以看影片後再來切第五週的版型(穎旻 - 上屆第五週主線任務講解)

---

> 謝謝今天有參與的同學們！
> (第五週其實沒有很簡單，12組的各位不簡單，再三週!!)
> :100:
<iframe src="https://giphy.com/embed/xHMIDAy1qkzNS" width="480" height="355" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/thumbs-up-xHMIDAy1qkzNS"></a></p>