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

第2課 課程目標

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

第2課 課程內容

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

請參考這幾份教學：

• https://www.w3schools.com/css/css_rwd_intro.asp

• https://www.w3schools.com/css/css_rwd_viewport.asp

• https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

• https://www.w3schools.com/bootstrap4/bootstrap_grid_stacked_to_horizontal.asp

• https://www.w3schools.com/bootstrap4/bootstrap_grid_xsmall.asp

• https://www.w3schools.com/bootstrap4/bootstrap_grid_small.asp

• https://www.w3schools.com/bootstrap4/bootstrap_grid_medium.asp

• https://www.w3schools.com/bootstrap4/bootstrap_grid_large.asp

• https://www.w3schools.com/bootstrap4/bootstrap_grid_xlarge.asp

• https://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp

還有： 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，畫面不會破掉、跑版。

完成這些，你就完成這次的課程目標了！