【Bootstrap4】3. 響應式寫法

🚩 響應式寫法

Bootstrap 是很受歡迎的前端 library (元件庫)，透過不同的 class 名稱就可以輕鬆做到響應式網頁。

🚩 中斷點

Bootstrap 4 的響應式寫法是由小裝置寫到大螢幕，中斷點分別是：

Bootstrap4官網參考來源

🚩 CodePen 範例

🚩 範例講解

在 row 裡面使用的 class 有：

<div class=”col-12 col-sm-6 col-md-3">

col-12 意思是在預設狀態下該 col 會佔據了 12 格空間，
因此排版會是單欄式排版。

col-sm-6 意思是當螢幕尺寸大於等於 576px 時，
該 col 會佔據 6 格的空間，
所以呈現出來的排版會變成雙欄式排版。

col-md-3 意思是當螢幕尺寸大於等於 768px 時，
該 col 會佔據 3 格的空間，
所以呈現出來的排版會變成四欄式排版。

【Bootstrap4】 系列教學

【Bootstrap4】1. Grid System 網格系統