【Bootstrap4】3. 響應式寫法
Published in
1 min readApr 24, 2020
🚩 響應式寫法
Bootstrap 是很受歡迎的前端 library (元件庫),透過不同的 class 名稱就可以輕鬆做到響應式網頁。
🚩 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 格的空間,
所以呈現出來的排版會變成四欄式排版。