第2課 課程目標

能夠使用 Bootstrap 網格系統來打造適應各種螢幕大小的排版。

第2課 課程內容

這一課要學習使用 Bootstrap 的網格系統。

請參考這幾份教學:

以及官方文件:
https://getbootstrap.com/docs/5.3/layout/grid/

內容不用全讀,只要讀到你覺得能夠做出作業即可。

第2課 作業

請打開美國時代雜誌網站首頁 http://time.com

接著打開 Glitch,用 Glitch 來寫這次的作業。

https://glitch.com/

你應該會在時代雜誌首頁看到這樣的畫面

這次作業要做藍色線條圈起來的部份。

請利用 Bootstrap 的網格系統,把藍色這部份做出來。

有以下2個條件需要滿足,才算是做完作業:

  • 在電腦上是 1-2-1 比例的多欄式佈局
  • 在手機上是上下堆疊的佈局

除此之外,只要有放入文字就可以了,圖片可以省略。

做完之後,你應該會發現,你做的網頁在手機或電腦螢幕上看都 OK,畫面不會破掉、跑版。

完成這些,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!


共有 6 則留言