【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 是指要佔滿他空間內的全部，所以在右半邊的呈現結果會是上下兩個。
