BootStrap5 第二章 - 排版(格線系統 )

點選參考CodePen上的練習

格線系統

主要用途

1. 減輕 magic number 出現
   何謂 magic number ?
   magic number就是一些奇怪的設定數字。
2. 解決CSS重複撰寫的問題

原理

排版三劍客：.container、.row、.col 1~12

重點

使用格線系統的基本要點:

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

.container 容器

容器是 Bootstrap 的基本建構區塊，在給定的設備或是視區中包含、填充和對齊你的內容，幫助水平居中與一致。
container在使用我們的網格系統時是必需的

1. 第一層不一定要continer 外面可以包其他東西。
2. .container 裡面不一定只能包row，它甚麼都可以包，可以只包footer/header讓他們滿版...
   ### BS帶有三種不同的容器
3. .container(預設容器), 每一個響應式斷點都會設置一個 max-width。
4. .container-fluid(流體容器), 所有斷點都是 width: 100%。，一直滿版。
5. .container-{breakpoint}(響應式容器), 直到指定斷點之前，都會是 width: 100%。
   例如: container-sm : 在比sm小之前都會是滿版

.max-width與每個斷點

BS的斷點 - 從小到大
sm 以上 > md 以上 > lg

參考文件 -- 範例

Row

1. .row 自帶了flex-wrap
2. .row外面第一層一定要container
3. .row裡面第一層一定要col

Column 欄

1. Columns 的網格主要建立於 flexbox 上。
2. 建立網格排版時，所有內容都是在 Columns 中。

Column breaks (col-)

1. col常見總欄數是 12
2. col - 若不寫數字 會依照比例做分配
3. col超過12會自動換行，因為row 自帶了flex-wrap。
4. 使用格線系統時會與row共同使用，為row的子層。
5. .col- 除了用在 .row 子層，也可以用於給予元素特定的寬度。當 Column 不用於 Row 以下時，都會直接填滿。

Gutter 間隔

Gutters 是在欄 (columns) 之間的 padding, 用來響應式的間隔和對齊 Bootstrap 網格系統中的內容。加在row上。

概念

1. Gutters 是介於欄位之間的間隙，經水平方向的 padding 產生。 我們在每一欄設置 padding-right 與 padding-left ，並使用負值的 margin 來抵銷每行的開頭與結尾以對齊網格內容。
2. Gutters 的寬度為 1.5rem (24px)。 這使我們能將網格與 padding and margin spacers 的比例匹配.
3. Gutters 可以進行響應式的調整。 使用特定斷點的 gutter 類別來修改水平 gutter、垂直 gutter、以及所有的 gutter。
4. 使用 .g-0 刪除預定義網格類別中欄位間的 gutters。這將會移除 .row 的負值 margin 以及所有直屬子列的水平 padding 。
5. 也可以增加斷點 g-{斷點}-數值

常見觀念

常見觀念：可以加上下 的 margin 與 padding
常見觀念：最外層至少補一個 container
常見觀念：整體格線邏輯是一致

撰寫CSS時-不要混寫!!!
容器歸於容器；元件歸於元件

不是甚麼東西都要格線系統 !!!通常內容不固、或是沒有follow格線系統、或是就只是單一一欄水平致中不會使用col。

通常不固定的內容不會使用col
像是選單，選單通常不會使用col，就使用Navbar。

常見錯誤

常見錯誤，在 .col 增加寬度
常見錯誤，在格線系統調整左右 margin 與 padding

範例

.header
    .container
        h2
        p
.container .content->做一些樣式或效果
    .row
        .col-3
        .col-9
            .row
                .col-6
                .col-6
 .footer
     .container
         h2
         p