第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/bootstrap5/bootstrap_grid_system.php
- https://www.w3schools.com/bootstrap5/bootstrap_grid_stacked_to_horizontal.php
- https://www.w3schools.com/bootstrap5/bootstrap_grid_xsmall.php
- https://www.w3schools.com/bootstrap5/bootstrap_grid_small.php
- https://www.w3schools.com/bootstrap5/bootstrap_grid_medium.php
- https://www.w3schools.com/bootstrap5/bootstrap_grid_large.php
- https://www.w3schools.com/bootstrap5/bootstrap_grid_xlarge.php
- https://www.w3schools.com/bootstrap5/bootstrap_grid_examples.php
以及官方文件： https://getbootstrap.com/docs/5.3/layout/grid/
內容不用全讀，只要讀到你覺得能夠做出作業即可。
第2課 作業
請打開美國時代雜誌網站首頁 http://time.com
接著打開 Glitch，用 Glitch 來寫這次的作業。
https://glitch.com/
你應該會在時代雜誌首頁看到這樣的畫面
這次作業要做藍色線條圈起來的部份。
請利用 Bootstrap 的網格系統，把藍色這部份做出來。
有以下2個條件需要滿足，才算是做完作業：
- 在電腦上是 1-2-1 比例的多欄式佈局
- 在手機上是上下堆疊的佈局
除此之外，只要有放入文字就可以了，圖片可以省略。
做完之後，你應該會發現，你做的網頁在手機或電腦螢幕上看都 OK，畫面不會破掉、跑版。
完成這些，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
共有 6 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
課程內容
https://blossom-tourmaline-cupboard.glitch.me/ 請站長檢查，對了time官網的格式換了!