# Bootstrap 5 格線系統


## 格線系統 - 減輕 magic number 出現
* 格線系統的組成：column(欄)、gutter(間距，可以是margin或padding)
* [960 grid，以前解析度都是 1024](https://960.gs/demo.html)
12個column(欄)11個gutter(間距)，因為12這個數字是可以被2.3.4.6整除，即一列兩欄，一列三欄，一列四欄等，其gutter以margin下去推
* [BS4 layoutit](https://www.layoutit.com/build)
其gutter以padding下去推

> 常見總欄數是 12

## [BS5 格線系統](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/)原理
* 排版三劍客： .container、.row、.col 1~12
* .container
* .container 固定寬度
* .container-fluid 滿版
* .row
* no-gutters：不需要 gutters
* 名言 1：.col- 的外層只能是 .row
* 名言 2：.row 裡面第一層只能是 .col-(就像ul裡面第一層只能是li，tr裡面第一層只能是td)
* 名言 3：網頁內容與元件請放在 .col- 裡面

>正確範例

<div class="container">
    <div class="row">
        <div class="col-4"></div>
        <div class="col-5"></div>
    </div>
    <div class="row">
        <div class="col-4"></div>
        <div class="col-5"></div>
    </div>
</div>

>錯誤範例(row下面第一層只能是col，h2部分就錯了)

<div class="container">
    <div class="row">
        <div class="h2">標題</div>
        <div class="col-3">左邊選單</div>
        <div class="col-8"></div>
    </div>
</div>

即不是我們想要的效果，標題和左邊選單沒有在同一列裡呈現
>若col放超過12，會往下排

<div class="container">
    <div class="row">
        <div class="col-4 green">左邊選單</div>
        <div class="col-4 green">標題</div>
        <div class="col-4 green">標題</div>
        <div class="col-4 green">標題</div>
        <div class="col-4 green">標題</div>
        <div class="col-4 green">標題</div>
    </div>
</div>


因為row本身也是應用[flex](https://courses.hexschool.com/courses/html/lectures/14727004)的效果去做出來的
flex-wrap:wrap即內容變多時，會往下疊，變到下一行去

>錯誤範例(多一層，因 row裡面第一層只能是col)

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


因row是`display:flex`，裡面第一層的div就會變成一個
而`<div class="col-6 green">標題</div>`即變成一般的div，沒有flex效果，會從上到下排列下來。

> 常見錯誤，在 .col 增加寬度

因col已給width的限制，如上圖col-6即定義width:50%，不需要再給一次寬度限制

> 常見錯誤，在格線系統調整左右 margin 與 padding
>
因兩個col-6加起來就是100%，再加`margin-right: 30px;`就超過了，故會往下排
bs5已有padding的設定

> 常見觀念：可以加上下 的 margin 與 padding

bs5使用`box-sizeing:border-box`將border往內推，故不會影響的整體高度(每日任務)

> 常見觀念：最外層至少補一個 container

row外層沒有container，就會是滿版，依照瀏覽器去延伸
container是個容器，即內容會呈現水平居中
正確範例(row的外層不一定是container)

    <div class="container">
        <div class="header">
            <div class="row">
                <div class="col-12">
                    <div class="h1">標題</div>
                </div>
            </div>
        </div>
        <div class="row footer">
            <div class="col-8">標題</div>
            <div class="col-4">標題二</div>
        </div>
    </div>
    

只寫col,會自適應寬度，依比例分配併排在一起(因其使用flex的縮寫語法1:1)

    <div class="container">
        <div class="row">
            <div class="col green">標題</div>
            <div class="col green">標題</div>
        </div>
    </div>


從上至下排版(col-12)

    <div class="container">
        <div class="row">
            <div class="col-12 green">標題</div>
            <div class="col-12 green">標題</div>
        </div>
    </div>

正確範例(container裡面第一層容器不一定要是row，因可能為滿版設計，不一定要符合格線系統)

    <div class="container">
        <div class="row header">
            <div class="col-3"></div>
            <div class="col-9"></div>
        </div>
        <div class="content">
            <div class="row">
                <div class="col-3">選單</div>
                <div class="col-9"></div>
            </div>
        </div>
        <div class="footer">
            <div class="p">表尾</div>
        </div>
    </div>

正確範例(設計header和footer為滿版)

    <div class="header">
        <h1 class="logo"><a href="">公司名稱</a></h1>
        <ul>
            <li><a href="">連結1</a></li>
            <li><a href="">連結2</a></li>
            <li><a href="">連結3</a></li>
        </ul>
    </div>
    <div class="container content">
        <div class="row">
            <div class="col-3">123</div>
            <div class="col-9"></div>
        </div>
    </div>
    <div class="footer">
        <p>表尾</p>
    </div>

> 常見觀念：整體格線邏輯是一致

預留空間給版型，以保有比較多的彈性
ex.若字數增加，不會跑版

## BS5 格線斷點設計
* [文件位置](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/#grid-options)
* 手機sm，平版md.lg
* boostrap 5 預設為手機優先(col-4、col-8即在設定手機以上的版型)，col-md-4、col-md-8才是設定平版以上版型
* [範例處](https://codepen.io/hexschool/pen/OJpXqVj?editors=1100)

> 若想做網站會先做 PC 版，可用 md(ipad size)、lg(tab和pc之間) 當起手式

先看權重，再看順序(後面覆蓋前面)
可同時寫四至五個class的設定，去斷點
通常寫三個設定即可，因若此三個設定的條件不滿足，就會變成手機版，通常寫md.lg，很少寫sm和xl

## 格線系統與元件整合

* 容器可以放很多元件，例如鉛筆盒就是容器，橡皮擦、筆就是元件
* 容器和元件的樣式分開設計，元件效果亦可分顏色、大小等樣式分開設定

.btn{
    width: 50px;
    display: inline-block;
    height: 400px;
    padding: 2px;
}

.btn-primary{
    background: blue;
}

.btn-lg{
    padding: 20px;
}

* [範例處](https://codepen.io/liao/pen/abvaXyy?editors=1100)

## 網站範例 + 通用類別搭配

通用類別補足容器或元件的細節，亦有設定斷點的功能
d-md-none：即display:none，平版(768)以上[隱藏](https://bootstrap5.hexschool.com/docs/5.0/utilities/display/#hiding-elements)
mb-md-5：平版以上，有[間距](https://bootstrap5.hexschool.com/docs/5.0/utilities/spacing/)margin-bottom
[Flex](https://bootstrap5.hexschool.com/docs/5.0/utilities/flex/)最常用，因很多情況下不會用到格線系統，可改變軸向，例如：可設定在手機時元件在左側，平版以上元件在右側

* [IT 邦幫忙](https://ithelp.ithome.com.tw/) - 手機版時隱藏右側內容 (d-none、d-lg-block)
* [六角學院](https://www.hexschool.com/) - 判斷哪些地方有用到 .row 哪些地方沒有

通常選單不做col,因字數不定，亦可能新增其他選單，用navbar，支援漢堡選單

滿版設計用或不用格線系統皆可，若不用格線系統，則可用text-align:center去讓文字置中


因row本身是display:flex，會併排，此用到[justify-content](https://bootstrap5.hexschool.com/docs/5.0/utilities/flex/#justify-content)-center，以通用類別去改變 flex 物件在主軸上的對齊置中。亦有.justify-content-md-center等，可針對不同斷點去設計。

* [甜點電商表尾](https://wcc723.github.io/F2E-PK/products.html) - 表尾設計 + row 裡面再加 .col

flex-column：靠上靠下，去拉出高度

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

Your email address部分 可用.row.justify-content-center>.col-6

photoshop 無格線系統設計
Adobe XD,Sketch figma illustrator 有[格線系統](https://wcc723.github.io/design/2018/10/19/grid-system-2/)設計

格線裡面可以還有格線
col是100%解析度，可以在它裡面再加row

<div class="container">
  <div class="row ">
    <div class="col-3">左邊選單</div>
    <div class="col-9">
      <div class="row">
        <div class="col-6 green">Cras justo odio</div>
        <div class="col-6 green">Cras justo odio</div>
        <div class="col-6 green">Cras justo odio</div>
      </div>
    </div>
  </div>
</div>