---
tags: Bootstrap5 實戰營
---

# Bootstrap5 實戰營第二週筆記

## 看筆記前你要先知道的事

首先你要知道 flex 是什麼 因為 Bootstrap5 的格線系統是運用 flex 做的。

接著請把[文檔](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/)好好看過一遍。

其次，你要知道，當你在撰寫代碼時，如果對格線系統理解不足，那你很容易讓格線系統變成災難！

## 來說說 magic number

在切版的時候 看到設計稿左邊 300px 右邊 680px

然後寫 CSS 時你就照寫 width:300px; width:680px;

這就是所謂的 magic number ...

解決方式：使用格線系統！！

## 格線系統介紹

格線系統的出現目的是為了解決傳統無法解決的問題(即上方的 magic number)，主要有兩個關鍵字 欄(colunm) gutter(間距)

colunm 是欄 你可以理解為表格中一行裡面從左到右佔據的位置 如圖
以這個簡單表格來說第一行的 A~G 分別為七個 col 然後整個第一行就代表一個 row

另外 gutter 是指欄(columns)之間的間距, 用來響應式的間隔和對齊網格系統中的內容。

以前電腦的瀏覽器預設大小都是 1280px * 768px 所以以前格線系統都是以 960px 為最大寬度

格線系統做十二欄的原因是因為它容易整除 可用 2 3 4 6 整除

其他常見的還有十六欄、二十四欄，但大宗還是十二欄。

gutter 通常使用 padding 或 margin 做成，像以 [960 Grid System](https://960.gs/) 來說 他是使用 margin ，而 Bootstrap 則使用 padding

## Bootstrap 5 的格線系統

格線系統有所謂的三劍客：container 容器、 row 列、 col 欄

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

這裡先附上直播中使用的 [layoutit](https://layoutit.com/build)

先理解一些基本觀念：
1. flex-wrap:wrap; 就是超過 100% 會往下掉，在 row 樣式中有設置這個
2. 常見錯誤觀念：col 中寫 width 或左右 margin/padding
3. 常見正確觀念：col 可以加上下的 margin/padding
4. row 最少一定要有一個 container 包在外面 讓元素可以置中排列

**可以想像排版是一個鉛筆盒，元件是橡皮擦或筆，橡皮擦跟筆要放在排版中，所以元件要放在 col 裡。**

當一個 row 裡面 有許多個 col-* (ex:col-6 col-4 col-8 等等) 你可能會想 超過 12 了，怎麼辦？
ok 請看基本觀念第一點：`flex-wrap:wrap; 就是超過 100% 會往下掉` 所以超過 12 後他會自動把多的往下排列。

再來 為什麼不能在 col 中寫寬度或左右的 margin/padding ?
因為他已經有預設的寬度跟左右 margin/padding 了 寫了會破壞整個結構 導致超出你要的範圍，這**很重要一定要記得**。

## 斷點
先上圖片支援：


請看上方圖片 它在斷點下方有一個小字 `>= 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 以上的斷點)

在一個 row 裡面寫很多個 col (不加上 -1 ~ -12 就單純 .col) 會怎樣？
它們會自動計算大小，每一欄將具有相同的寬度，當裡面內容很多時則會自適應的往下掉(超過 100% 寬度就往下掉)。
這個 col 很難定義計算概念 但通常運用上來說會是以下情況：
我有一個區塊它中間佔據 7 欄 左右佔據的欄位平分
這時候你可以寫這樣：

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col-7">col</div>
        <div class="col">col</div>
    </div>
</div>

他主要是用來做這種處理的，因為沒有 col-2.5 這種東西。

## 巢狀格線系統

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

請參考下方圖片：


這是一個左四欄選單 右八欄商品列表的設計 並且在右八欄的裡面又有各六欄的產品

這時候結構就會是：

<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 ，就是所謂的巢狀。

## 一些比較重要的通用類別

1. 在 IT 邦幫忙 - 手機版時會隱藏右側內容，這是使用 d-none d-md-block 做成的。請參考[此文章](https://bootstrap5.hexschool.com/docs/5.0/utilities/display/)
2. 在一些地方可以看到欄位數不足 12 但卻做到置中排列的效果，是使用 justify-content-center 做成的。請參考[此文章](https://bootstrap5.hexschool.com/docs/5.0/utilities/flex/)
3. [關於 margin/padding](https://bootstrap5.hexschool.com/docs/5.0/utilities/spacing/)

## 關於其他 Q&A

Q:兩個一列加一個一列的結構(如下圖) 寫一個 row 好還是寫兩個 row?

A:一個就好 因為在後台獲取資料時這些同樣是商品數據 只需要一次渲染就好 如果分很多個 row 就變成一次只能渲染兩個產品 另外一個產品要去另一個 row 裡面渲染（~~除非超恨後端 想要讓後端渲染到死 你就可以寫多個 row 拉仇恨值~~）前面純屬開玩笑，重點：**寫一個 row 就好**。

Q:下方代碼對嗎？

<div class="container">
    <div class="row">
        <div>
            <div class="col-6">
                col
            </div>
            <div class="col-6">
                col
            </div>
        </div>
    </div>
</div>

A:錯，因為 row 下面只能有 col 其他東西不准存在！！！

Q:下方代碼對嗎？

<div class="container">
    <header>
        <div class="row">
            <div class="col-6">
                col
            </div>
            <div class="col-6">
                col
            </div>
        </div>
    </header>
</div>

A:對，因為 container 沒有規定下一層只能是 row

Q: container 中同時有其他樣式，不會破壞 container 的樣式嗎？
A: container row col 可以有其他樣式，只要不動到寬高或 margin padding 就好！設定背景顏色、背景圖片、文字樣式，這類可以哦！