【Bootstrap4】1. Grid System 網格系統
🚩 引用 Bootstrap4
在開始使用 Bootstrap 之前,需要載入相關的 CSS、JS。
在這邊所使用的是 Bootstrap 所提供的cdn 連結。
① CSS:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
② JS:
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
tips:為了讓網頁的 HTML 與 CSS 順利載入後才使用 JS 做效果,JS 相關的引用可以放在整個網頁的結尾,也就是 </body> 的標籤前方。
🚩 Container
Container 在 Bootstrap 中是最基本的元素,由其當要使用 Grid 時是必備的,他對於響應式排版有很大的幫助。
除了 .container 之外,也有 100% 寬度的 .container-fluid,他們也都支援 bootstrap 響應式的寫法,例如 .container-sm、.container-fluid-xl。
🚩 Grid
Grid 是使用 row 、col 來控制,在使用 col 來排版時,外面一定要用 row 包起來。 row 裡面是可以在使用 row 的。
Grid 是將畫面切分成 12 欄來做排列,使用 12 這個數字是因為他是 1、2、3、4、6 的最小公倍數,因此使用 12 在 Grid 的排版是相對靈活的。
如果還要考慮到例如 5 的話,最小公倍數就會到 60 ,排版上會過於複雜。
🚩 CodePen 範例
🚩 範例講解
範例中舉了五種常見的排版方式:
① 單欄式排版
單欄式排版的寫法就是在 row 裡面寫一個 col-12 。
② 雙欄式排版
雙欄式排版的寫法就是在 row 裡面寫兩個 col-6 。
也可以寫成第一個 col 他要佔六格的 col-6 ,第二個直接只寫 col , col 預設是有多大的空間就使用多少,因此呈現的效果如同 col-6 。
③ 雙欄式排版-2
呈現結果會是左邊佔了 4 格,右邊佔了 8 格。
④ 三欄式排版
三欄式排版的寫法是在 row 裡面寫三個 col-4 。
⑤ row 裡面再放 row
在右邊的 col-8 裡面在放一個 row ,並寫兩個 col-12 ,因為 12 是指要佔滿他空間內的全部,所以在右半邊的呈現結果會是上下兩個。