尤川豪   ·  4月前
Exp. 1,630  ·  212 貼文  ·  145 留言

RWD 網頁設計入門:第2課 ── 適應各種裝置的螢幕:流動的網格系統

第2課 課程目標

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

第2課 課程內容

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

請參考這幾份教學:

還有: https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7

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

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

第2課 作業

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

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

https://thimble.mozilla.org/zh-TW/

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

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

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

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

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

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

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

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

  分享   共 630 次點閱
共有 4 則留言
feifeitzu   ·  4週前
Exp. 121  ·  0 貼文  ·  21 留言
 
尤川豪   ·  4週前
Exp. 1,630  ·  212 貼文  ·  145 留言

哈囉!我看到囉!

寫得很好!相信你也對這種 RWD 設計的基本原理大致了解了!

繼續保持!

對了,你是不是有 po 過一篇作業,之後刪掉重做一份作業了?

feifeitzu   ·  4週前
Exp. 121  ·  0 貼文  ·  21 留言

對,這份是重做的~

尤川豪   ·  4週前
Exp. 1,630  ·  212 貼文  ·  145 留言

OKOK!

您的留言