--- tags: 網頁切版直播班 - 2021 夏季班 --- # 8/9(一) 每日任務 ## 題目 利用 Bootstrap 做出響應式排版：任務中已提供 HTML 的部分，請同學新增 Bootstrap class 將以下版型在**桌機尺寸時設為四個一排**，**平板尺寸時設定為兩個一排**，在**手機尺寸時設定為一個一排**，如圖所示： >桌機尺寸時設為四個一排 >![](https://i.imgur.com/zfi2Imu.png) >平板尺寸時設定為兩個一排 >![](https://i.imgur.com/OYJGTKD.jpg) >手機尺寸時設定為一個一排 >![](https://i.imgur.com/rG9WBOA.jpg) 需透過 Codepen 繳交 （載入 Bootstrap CSS：https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css ） ![](https://i.imgur.com/9UbRit4.png) ### HTML ```htmlmixed= <div class="container"> <div class="row"> <div class="..."> <img class="img-fluid" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""> </div> <div class="..."> <img class="img-fluid" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""> </div> <div class="..."> <img class="img-fluid" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""> </div> <div class="..."> <img class="img-fluid" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""> </div> </div> </div> ``` ## 回報流程 1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～ **解答及回報方式請參考下方** ![](https://i.imgur.com/vftL5i0.png) <!-- 解答：[Codepen 範例](https://codepen.io/Bingbingboom/pen/oNZWLQO) --> 回報區 --- <!-- 0. Bingbingboom（回報範例，請使用註解回報） Codepen：https://codepen.io/Bingbingboom/pen/oNZWLQO --> <!-- 1. 焦糖 Codepen：https://codepen.io/yen-kg/pen/LYWvGyN --> <!-- 2. Jasmin Codepen：https://codepen.io/thejasmin/pen/QWdOGMb --> <!-- 3. Alpha //♥ Codepen：https://codepen.io/alphatero/pen/YzVRJNV --> <!-- 4. Gui https://codepen.io/guitimliu/pen/JjNemEX --> <!-- 5. Karen Huang https://codepen.io/Coding_Snorlax/pen/JjNemNK?editors=1100 --> <!-- 6. Jean Codepen：https://codepen.io/jean-liu/pen/BaRGqpx --> <!-- 7. Lina Chen codepen: https://codepen.io/LinaChen/pen/poPQxWm --> <!-- 8. xing codepen: https://codepen.io/xing10/pen/WNjYaXL --> <!-- 9. yijun codepen: https://codepen.io/sandy3068/pen/wvdQYqx --> <!-- 10.大衛 codepen:https://codepen.io/exnsrpjc/pen/ZEKmqaz --> <!-- 11.Tori codepen: https://codepen.io/hayen/pen/PomxyRa?editors=1000 --> <!-- 12.peter.chen codepen: https://codepen.io/JIAN-RONG/pen/gOWQBzz?editors=1010 --> <!-- 13. roger codepen: https://codepen.io/rogerchuang/pen/QWvJZQo?editors=1000 --> <!-- 14 .kevinhes codepen: https://codepen.io/kevinhes/pen/MWmzPXW --> <!-- 15. 雷古娜 https://codepen.io/tinahopo/pen/NWjEOgO --> <!-- 16. lumei https://codepen.io/l_umei/pen/gOWQBQj --> <!-- 17.陳sam https://codepen.io/euldpliv/pen/dyWQgrZ?editors=1010 --> <!-- 18. Joy Cheng codepen: https://codepen.io/joycheng5432/pen/Pomxyrx?editors=1000 --> <!-- 19. Jun Chan codepen: https://codepen.io/chujunchan/pen/ExmOdGg?editors=1100 --> <!-- 20. KK codepen: https://codepen.io/potatokaka/pen/abWQQmy?editors=1000 --> <!-- 21. Gill codepen:https://codepen.io/Gill-Chin/pen/abWQQWV --> <!-- 22.harold https://codepen.io/YuWin0805/pen/yLbQQpV --> <!-- 23.阿瓜 https://codepen.io/hoick/pen/WNjYYgw?editors=1010 --> <!-- 24.huanan https://codepen.io/hua_nan/pen/Pomxxvw --> <!-- 25. Sz https://codepen.io/szyln/pen/oNWQQKm --> <!-- 26. WilsonHan https://codepen.io/wi0821/pen/abWQQej --> <!-- 27. Tsai 明達 CodePen: https://codepen.io/bmzpfyxe/pen/xxqaNmZ?editors=1000 --> <!--28.童筱涵 https://codepen.io/hsiaohan/pen/abWQPWX?editors=1000 --> <!--29. YuriT CodePen: https://codepen.io/wenfisht/pen/GRmwPyq --> <!--30. Cate Chang CodePen: https://codepen.io/tutz/pen/JjNemQJ --> <!--31. Elaine Liu https://codepen.io/elaine7598/pen/poPQqra --> <!--32. icy https://codepen.io/ccsbjzze-the-sasster/pen/BaRGvBj --> <!-- 33. ZOE WU https://codepen.io/Zoechiueh/pen/oNWQmyW?editors=1000 --> <!--34. Peggy Tsai https://codepen.io/pei-chi-tsai/pen/KKmrJgb --> <!--34. 群嘉 codepen:https://codepen.io/efzdamnp-the-lessful/pen/MWmzxga?editors=1010 --> <!--35.Cheng Pei-hsuan codepen: https://codepen.io/PaCheng/pen/poPLjoG --> <!-- 36.Page https://codepen.io/kanawin821/pen/jOmQJXV?editors=1000 --> <!-- 37.Sam li codepen:https://codepen.io/sam830623/pen/OJmaqGV --> <!-- 38.curry codepen: https://codepen.io/Ted19851223/pen/QWvJPyv --> <!-- 39. Ruby Chiang Codepen: https://codepen.io/rubyyl0701/pen/wvdQZNr --> <!--40. 阿和 codepen:https://codepen.io/shnny/pen/ZEKmNXg?editors=1000 --> <!-- 41. hellocrab https://codepen.io/hellocrab/pen/BaRGgOa --> <!-- 42: Sec https://codepen.io/Sentiments/pen/MWmZgod --> <!-- 43.Hi Annie https://codepen.io/lhohdalu/pen/zYwyOar --> <!-- 44.黃士桓 https://codepen.io/shr-huan-huang/pen/XWRoWbN?editors=1000 --> <!-- 45. 肉鬆 codepen: https://codepen.io/klrkicog/pen/oNWJNjp --> <!-- 46. KinHei Shing https://codepen.io/kinhei-shing/pen/PomXoGV --> <!-- 47. Jessie Cheng https://codepen.io/JessieMosbi/pen/jOmXEBL --> <!-- 48. Erin Huang https://codepen.io/ErinHuang/pen/zYwyYqZ --> <!-- 49. Meng https://codepen.io/MGHN/pen/GRmExgg --> <!-- 50. Jim Hwang https://codepen.io/jimh1129/pen/YzVdPvX --> <!-- 51. Tina Yen codepen:https://codepen.io/tlorfrnl-the-typescripter/pen/VwbqvzB --> <!-- 52. 沈依蓉 https://codepen.io/lily-oa/pen/qBmLqJR --> <!-- 53. RitaHuang https://codepen.io/Rita-Rossweisse/pen/eYWbWrO --> <!-- 54. ZY Hsu https://codepen.io/zihyin/pen/wvdRqxJ?editors=1100 --> <!-- 55 zy https://codepen.io/zy_c/pen/abWPVdJ--> <!--56. Sihle Huang code: https://codepen.io/bugbug777/pen/vYmvpgo?editors=1100 --> <!-- 57. KatieZhao https://codepen.io/katiezhao/pen/abWPaMx?editors=1000 --> <!-- 58. OOber https://codepen.io/xtsjrjdv/pen/qBmLJgq --> <!-- 59. Riley https://codepen.io/jjpxbprd/pen/dyWwwXa --> <!-- 60.Shani https://codepen.io/ShaniMa/pen/bGWOzJm --> <!-- 61. 魚魚 https://codepen.io/YuYu_29/pen/VwbgjLz --> <!-- 62. 佳文 https://codepen.io/chiawen81/pen/YzVBXLN?editors=1100 --> <!-- 63. una https://codepen.io/xbsapbas-the-vuer/pen/eYWxzzp --> <!-- 64. Yurie https://codepen.io/_u_jung/pen/abWXZLJ --> <!-- 65. ellie https://codepen.io/hsu-yu/pen/KKmJbbv --> <!-- 66. tim Chou https://codepen.io/tim-chou/pen/qBmggae --> <!-- 67. axlrock1021 https://codepen.io/andy1021/pen/bGWZRwx --> <!-- 68. jimmyFang https://codepen.io/pohxiqqo/pen/qBmvxmz?editors=1000 --> <!-- 69. anna https://codepen.io/annhys/pen/jOmJejp?editors=1000 --> <!-- 70. 袁祥恩 codepen: https://codepen.io/ovfxsavp-the-bashful/pen/yLbrGBB?editors=1000 --> <!-- 71. YOYO https://codepen.io/lumedkle/pen/YzVMBjz --> <!-- 72. Min Chun Tsai codepen: https://codepen.io/Tsai0926/pen/gOWyyOK --> <!-- 73. Alberto https://codepen.io/AlbertoLL/full/eYWajdQ --> <!-- 74. Joe Kuo https://codepen.io/alertislow/pen/XWRLmXx --> <!-- 75. WA https://codepen.io/ldddl/pen/jOmjaNw --> <!-- 76. YJ kung https://codepen.io/bagelover/pen/jOwOvjp --> <!-- 77. AKI https://codepen.io/akichen27/pen/jOwrWRE -->