# 【week6】 - Bootstrap5 grid格線系統
## BS5 SCSS 載入 ([架構圖講解](https://i.imgur.com/T6HHbFv.png))
* [SCSS default 觀念講解](https://codepen.io/pohxiqqo/pen/WNjYMpY?editors=1100)
```(html)
<h1>hello,world</h1>
```
```(scss)
//載入兩隻變數檔案
// 自己客製化的變數檔案
$primary: red !default;
// bs5 內建的變數檔案
$primary: #ff0000 !default;
h1{
color: $primary;
}
```
``` =scss
@import "../../../node_modules/bootstrap/scss/functions";
@import "./helpers/variables";
@import "../../../node_modules/bootstrap/scss/bootstrap";
@import './layout/index.scss'
```
> 不要去修改 node_modules/bootstrap 裡面的 SCSS，因為別人接手你 code 時，會自行使用 npm install 安裝套件，此時裡面模組就都重新下載了
* 常見修改bootstrap5內建 ( _variables) 變數樣式
- [顏色 (color)](https://i.imgur.com/fVd1bZt.png)
- [字體大小 (font-size)](https://i.imgur.com/QFOuE4J.png)
- [空間(spacer)](https://i.imgur.com/NE53HwC.png)
- [全域設定 (base)](https://i.imgur.com/1vZ16z9.png)
- [連結 (link)](https://i.imgur.com/Yx9XVQK.png)
## 格線系統(grid)
## Mobile first 與 Desktop first 差別
* [desktop first (@max-width 大→小)](https://codepen.io/pohxiqqo/pen/qBmQpdv?editors=1100) (從桌機板寫到手機板)
* [mobile first (@min-width 小→大)](https://codepen.io/pohxiqqo/pen/mdmQpPJ?editors=1100) (從手機板寫到桌機板)
## 格線系統 - 減輕 magic number 出現
* 格線系統關鍵字：column(欄)、gutter(間距)
* [960 grid，以前解析度都是 1024](https://960.gs/demo.html)
* [BS4 layoutit](https://www.layoutit.com/build)
> 常見總欄數是 12
## [BS5 格線系統](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/)原理
* 練習範例 [grid格線系統](https://codepen.io/pohxiqqo/pen/VwbVrjB?editors=1100)
* bootstrap5 網格系統 (Grid system)範例
* 排版三劍客： .container、.row、.col 1~12 (80px~960px)
* .container
* .container 固定寬度
* .container-fluid 滿版 (要使用在滿版版型的話要補上 bg-color)
* .row
* no-gutters：不需要 gutters 80px = (mr-10px + ml-10px+col 60px)
* 名言 1：.col- 的外層只能是 .row
* 名言 2：.row 裡面只能是 .col-
* 名言 3：網頁內容與元件請放在 .col- 裡面
> 常見錯誤，在 .col 增加寬度
> 常見錯誤，在格線系統調整左右 margin 與 padding
> 常見觀念：可以加上下 的 margin 與 padding
> 常見觀念：最外層至少補一個 container
> 常見觀念：整體格線邏輯是一致
## 格線系統與元件整合
* [範例處](https://codepen.io/liao/pen/abvaXyy?editors=1100)
* [洧杰老師批改 BS5 幕資網頁](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/HkOeaJIcO/%2F10fOwZuYQ_uCyWlUNFuk_g)
## 網站範例 + 通用類別搭配
* [IT 邦幫忙](https://ithelp.ithome.com.tw/) - 手機版時隱藏右側內容
* [六角學院](https://www.hexschool.com/) - 判斷哪些地方有用到 .row 哪些地方沒有
* [甜點電商表尾](https://wcc723.github.io/F2E-PK/products.html) - 表尾設計 + row 裡面再加 .col
* [Bootstrap Template](https://bootstrapmade.com/bootstrap-4-templates/) - 一次搞懂所有格線系統用法
{"metaMigratedAt":"2023-06-16T06:22:37.502Z","metaMigratedFrom":"Content","title":"【week6】 - Bootstrap5 grid格線系統","breaks":true,"contributors":"[{\"id\":\"f422239f-96b1-4f7a-9f9e-820aed4ce77b\",\"add\":595,\"del\":593},{\"id\":\"d67487dd-834b-4cce-b31d-e6d2809b1d5c\",\"add\":3028,\"del\":530}]"}