第13組 第五週｜後台表單 Bootstrap === ###### tags: `小組任務` `第幾週` `2021夏季切版班` `team13` [【總】小組任務｜2021夏季切版班 Team13](/GrA9x5TMQoGuIhR8xF7eyg) :::info - **開會地點：** meet - **開會時間：** 8/1(日) 19:00 - **討論目錄：**[**第五週任務**](https://hackmd.io/xhBHveD-RrW2VhoXduXmMw) `?min` - [x] 討論（截圖） - [x] 公布下週開會時間（更新 slack） - [x] bs 至少要讀懂哪些區塊 - [x] 任務一：成功載入 BS5 + modal 元件 - [x] 任務二：表格用法 table、th、tr、td - [x] 任務三：第五週主線 - [x] 討論（截圖再確認） - **參與成員**：Ian, Jiang V, Min Chun Tsai, Shani, Summer.H, Sz, Xing, 家齊, 巫樾 - 未參加成員：mansonivan - 直播內容 - [第五週直播講義](https://hackmd.io/@hexschool/BkBp_n11Y) - 筆記 ::: --- ## 任務一：試著載入 BS5 ，並作出 [modal 效果](https://bootstrap5.hexschool.com/docs/5.0/components/modal/#scrolling-long-content) * 請使用 codepen 來練習，回報也可用 codepen * 如果有成員想用 GitHub Pages 來放到自己的環境練習也可以 ### 回答區 >>[codepen](https://codepen.io/xing10/pen/bGWKqPG) >>[name=Xing 分享][color=#E69F80] > >>https://codepen.io/wan-chine/pen/bGqmzYo (bs練習) >>https://codepen.io/wan-chine/pen/eYWKvGZ (MODEL練習) >>[name=Summer.H 分享][color=#F5697A] > >>[codepen](https://codepen.io/szyln/pen/abWGEqL) >>[name=Sz 分享][color=#BB84F5] > >>[codepen](https://codepen.io/ShaniMa/pen/gOWKwKZ) >>modal只做了第一個的眼睛,彈出視窗也先用bs5的範例 >>[name=Shani 分享][color=#FFCE6B] > >>[codepen](https://codepen.io/viccjiang/pen/ZEKRWOJ) >>[name=Jiang V 分享][color=#A7E683] > >>(https://codepen.io/irebvmlx/pen/yLbEQaE) >>[name=Ian 分享][color=#37E4FF] >>[codepen](https://codepen.io/Tsai0926/pen/eYWPwqr) >>[name=Min Chun Tsai 分享][color=#efc267] ## 任務二：討論 HTML 裡的表格標籤(table、th、tr、td)的用法 請試著做出[設計稿](https://xd.adobe.com/view/636097e2-bd56-4710-9483-0f40e0063a9a-3633/)裡面的表格設計，並提供 codepen 來檢視 ![](https://i.imgur.com/wlkOk8p.png) >[table小知識分享](https://www.fooish.com/html/table.html) >[name=Summer.H 分享][color=#F5697A] ### 回答區 >>[codepen](https://codepen.io/xing10/pen/jOmxRwN) >>[name=Xing 分享][color=#E69F80] > >>[codepen](https://codepen.io/ShaniMa/pen/gOWKwKZ) >>同上 >>modal只做了第一個的眼睛,彈出視窗也先用bs5的範例 >>[name=Shani 分享][color=#FFCE6B] > >>[codepen](https://codepen.io/viccjiang/pen/gOWKrGb) >>[name=Jiang V 分享][color=#A7E683] >>[codepen](https://codepen.io/Tsai0926/pen/dyWgxYb) >>[name=Min Chun Tsai 分享][color=#efc267] ## 任務三：討論第五週版型 討論該[版型](https://xd.adobe.com/view/636097e2-bd56-4710-9483-0f40e0063a9a-3633/screen/96276e44-04d1-43be-98d3-95c6d71c6fc7/)如何攻略 ### material icon 安裝 [Google font, Material icon 安裝方式](/3hVBtQrmRoGt9mxjTMDNhQ) [Material icon Outlined 用法 by Sz](/fX6SikWpRAuzfE7glNi33w) ### 想不起元件名稱是什麼可以看這個 [bs cheatsheet](https://bootstrap5.hexschool.com/docs/5.0/examples/cheatsheet/) --- ### 回答區 >![](https://i.imgur.com/3b3zTxl.png) >[dropdown](https://bootstrap5.hexschool.com/docs/5.0/components/dropdowns/) 覺得跟 select 好像 --- >![](https://i.imgur.com/ryKdzvs.png) >[sidebar example](https://bootstrap5.hexschool.com/docs/5.0/examples/sidebars/) --- >![](https://i.imgur.com/LFBLJYs.png) >card or table, 上面的 all(4)還不知道 --- >![](https://i.imgur.com/TFXZy5t.png) >[navbar](https://bootstrap5.hexschool.com/docs/5.0/components/navbar/) --- >![](https://i.imgur.com/LgfIn4h.png) >[outline button](https://bootstrap5.hexschool.com/docs/5.0/components/buttons/) --- >![](https://i.imgur.com/U1cXmZs.png) >[pagination](https://bootstrap5.hexschool.com/docs/5.0/components/pagination/) --- >![](https://i.imgur.com/p0cKp6H.png) >驗證好像還有點高深 --- >![](https://i.imgur.com/n86auBM.png) >modal 有帶 關閉符號 >[關閉按鈕 (Close button)](https://bootstrap5.hexschool.com/docs/5.0/components/close-button/) --- ## 討論截圖 ![](https://i.imgur.com/dig6EOt.jpg)