###### tags: `21 天 Bootstrap 5 新手實戰營`
# Bootstrap5_w2筆記(格線系統、元件)

## 教學資源

影片教學 [六角 新手教學實戰營_格線系統](https://www.youtube.com/watch?v=mSp2csrvYhk&list=PLYrA-SsMvTPOX9oF6ld9RGwWlo7PceI_P&index=3)
考參考文檔 [格線系統](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/)

## 格線系統
* 格線系統的出現是為了減少 magic number
magic number 就像是寫死的大小，設計稿寫上左邊100px右邊280px，你就照寫，這樣導致css肥大，難以維護，而格線系統的出現就是為了解決此現象，也因此好的設計師應多使用格線系統來做設計會較為恰當。
* [960grid 以前解析度都是1024](**https://**)
* 格線系統關鍵字:column(欄)、gutter(間距)

row可以想像成excel中的橫向列，colunm 則是欄，一格一格就是col，col中要放入元件。
以這個簡單表格來說第一行的 A~G 分別為七個 col 然後整個第一行就代表一個 row

另外 gutter 是指欄(columns)之間的間距。

> 常見的總欄數是12

## Bootstrap 5 的格線系統

排版三劍客：container 容器、 row 列、 col 欄

重點中的重點：
1. 一定要有最外面的容器 container，container內第一層不一定要是row，可以放別的東西
2. col 的外層只能是 row
3. row 裡面只能放 col
4. 其他網頁內容(元件等)請放在 col 裡面

注意：
1. 請勿調整col左右的大小!!!，**可調上下不可條左右!!**會破壞格線結構，整個壞掉。
2. 常見錯誤觀念：col 中寫 width 或左右 margin/padding
3. 常見正確觀念：col 可以加上下的 margin/padding

## 範例
* col沒寫，則依據數量自動調整

* col-md-2 小裝置均分，md以上給col2一等分，另外兩個均分

* 在小裝置上滿版，md以上分三欄

## 斷點

Bootstrap 的網格系統預設會自動適應六個斷點以及您自定義的任何斷點。而這六個斷點如下：


請看上方圖片 它在斷點下方有一個小字 `>= 768px` 表示 md 這個斷點是有包含 768px 在內！**斷點是>= 有包含。**

當寬度超過該數值時會套用樣式。

**範例:手機滿版 平板六欄 桌面版三欄的區塊**?

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-3">col</div>
        <div class="col-12 col-md-6 col-lg-3">col</div>
        <div class="col-12 col-md-6 col-lg-3">col</div>
    </div>
</div>

詳解：
1. 首先最外面給一個 container
2. container 裡面放 row
3. row 裡面放 col
4. col-12 指的是佔十二欄 即滿版(因為 Bootstrap 是十二欄格線系統 超過 12 會往下掉)
5. col-md-6 指的是平板以上 佔六欄(md 就是 768px 以上的斷點)
6. col-lg-3 指的是桌面版以上 佔三欄(lg 就是 960px 以上的斷點)

* [Bootstrap Template](https://bootstrapmade.com/bootstrap-4-templates/) -一次搞懂所有格線系統用法

## 巢狀格線系統

什麼是巢狀？就是你在 col 裡面又加 row 與 col

請參考下方圖片：


>　左四欄右八欄，右八欄中分成四個row各佔col-6

這時候結構就會是：

<div class="container">
    <div class="row">
        <div class="col-4">這裡是選單</div>
        <div class="col-8">
            <div class="row">
                <div class="col-6">
                    這是產品
                </div>
                <div class="col-6">
                    這是產品
                </div>
                <div class="col-6">
                    這是產品
                </div>
                <div class="col-6">
                    這是產品
                </div>
            </div>
        </div>
    </div>
</div>

在 col 裡面又添加了 row ，就是所謂的巢狀。

## 範例
* 手機板隱藏側欄 桌面板打開側欄 .d-none .d-lg-block
* 通常選單欄不會用row col設定，用navbar
* 儘管不是滿版設計，也可以設計大一點，多留一些距離，給自己預留些保險

## 其他
* bootstrap預設樣式
> container會往內推
> row往外推
> col再往內推
* 容器就讓它回歸容器，元件就讓它回歸元件吧！ 兩個樣式分開寫，不要寫在一起。

### gutter
* gutter bootstrap用padding去推的，可以寫在row上
也可以寫在col上
> 記得要包兩層