---
# System prepended metadata

title: 2021 夏季切版直播班 week6 - 格線系統 / SCSS 變數載入
tags: [Grid, BS5, 格線系統, 上課筆記, SCSS, Bootstrap, 網頁切版直播班 - 2021 夏季班]

---

###### tags: `上課筆記` `BS5` `Bootstrap` `SCSS` `Grid` `格線系統` `網頁切版直播班 - 2021 夏季班`

# 2021 夏季切版直播班 week6 - 格線系統 / SCSS 變數載入
2021/08/06 上課筆記
    
## 課程說明
* [Gui Ting Liu 志工整理洧杰老師批改筆記](https://hackmd.io/48BTVPQVR_y4jq2E0PFHXQ?view)
* 公布彩蛋課程，**網站架站一條龍**
    * 買網址、設定 DNS
    * SEO 關鍵字搜尋設計
    * Google Seach console 提交網站流程
    * Google analytics 分析服務綁定

### 截止時間點
* 8/20 第八週上課結束
* 8/27(五) 彩蛋課程-網站架站一條龍(錄影只會在完課率60%的菁英班課程)
* 8/29(日) 繳交截止日
* 9/3(五) 版型發表會 

## BS5 格線系統
![](https://i.imgur.com/L5wt3ej.png)

### Mobile first 與 Desktop first 差別
* [desktop first](https://codepen.io/liao/pen/WNQJVqr?editors=1100)
max-width
PC > 992px > 768px > mobile
* [mobile first](https://codepen.io/liao/pen/jObxgeW?editors=1100) (Bootstrap 採用)
min-width
mobile > 768px > 992px > PC

### 格線系統 - 減輕 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/)原理
* 排版三劍客： .container、.row、.col 1~12
    * .container
        * .container 固定寬度
        * .container-fluid 滿版
    * .row
        *  no-gutters：不需要 gutters 
* 名言 1：.col- 的外層只能是 .row
* 名言 2：.row 裡面只能是 .col-
* 名言 3：網頁內容與元件請放在 .col- 裡面
> 常見錯誤，在 .col 增加寬度
> 常見錯誤，在格線系統調整左右 margin 與 padding

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

* col1-12 可加上 margin -top bottom，但不要改水平軸 left right

### BS5 的 $grid-breakpoint 與 $container-max-width
* 建議不要改，BS5 已算好剛好整除
* 如需客製化
    * 斷點 min-width：`$grid-breakpoint`
    * 實際 max-width 寬度：`$container-max-width`
```sass=
// scss-docs-start grid-breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;
// scss-docs-end grid-breakpoints

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

// scss-docs-start container-max-widths
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
) !default;
// scss-docs-end container-max-widths
```

### 格線範例
1. 左三右九欄，裡面加上元件
2. ul ，裡面 li 佔 3 欄，`list-unstyled`
3. [鐵人邦](https://ithelp.ithome.com.tw/)滿版式設計搭配 BS5 格線
4. [六角](https://www.hexschool.com/)右上角選單，以上課程都包含 5 欄居中
5. [表尾區塊是否寫死](https://xd.adobe.com/view/057f9d4e-6781-43fe-9aea-9f73f67dd2fd-502c/screen/5c7451a8-36b4-4973-8658-ac17cc2a0f81/specs/)

### BS5 格線斷點設計
* [文件位置](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/#grid-options)
* [範例處](https://codepen.io/hexschool/pen/OJpXqVj?editors=1100)
![](https://i.imgur.com/DQVevsr.png)

> 若想先做 PC 版，可用 md、lg 當起手式

### 格線系統與元件整合
* [範例處](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/) - 一次搞懂所有格線系統用法

## 客製化 Bootstrap 色系與樣式

### BS5 SCSS 載入 ([架構圖講解](https://whimsical.com/bs5-A1pswT87rkXs7peANUBVp6))
1. [SCSS default 觀念講解](https://codepen.io/hexschool/pen/oNWawom?editors=1100)
    * 觀念 1：＂default 預設值＂的權重會比另外設定的值還要低，所以只要有自己客製化的值就會蓋掉 default 值。
    * 觀念 2：＂default 預設值＂會從最上面開始載入，只要有成功載入一個 default 值，後面的 default 值就不會吃了。
3. [六角 Gulp 範例](https://github.com/hexschool/web-layout-training-gulp/tree/feature/bs5)，請記得切換到 feature/bs5 區塊，再按 Download
![](https://i.imgur.com/PP1OBZu.png)

```sass=
@import "../../../node_modules/bootstrap/scss/functions";    // 這支 functions 一定要放第一個，因為他裡面有些函式 Bootstrap5 會用到，不然後面有很多會用到的都會無法執行
@import "./helpers/variables";    // 這支為自定變數，運用 !default 概念，先吃到就不會再去讀後面的設定了
@import "../../../node_modules/bootstrap/scss/bootstrap";    // 這支為 bootstrap 的變數
@import './layout/index.scss'
```

> 不要去修改 node_modules/bootstrap 裡面的 SCSS，因為別人接手你 code 時，會自行使用 npm install 安裝套件，此時裡面模組就都重新下載了

### repo 有更動的地方
1. 多加入了一個 [bootstrap](https://github.com/hexschool/web-layout-training-gulp/blob/feature/bs5/package.json#L21) 模組
2. 多加入了一個 [bootstrap JS](https://github.com/hexschool/web-layout-training-gulp/blob/feature/bs5/gulpfile.js/envOptions.js#L52)，讓 dist 編譯出來的 vendors.js 可以載入 BS5 JS 套件
3. [layout.ejs](https://github.com/hexschool/web-layout-training-gulp/blob/feature/bs5/app/layout.ejs#L14-L49)、[index.html](https://github.com/hexschool/web-layout-training-gulp/blob/feature/bs5/app/index.html) 加入了些 BS5 範例元件
4. [SCSS](https://github.com/hexschool/web-layout-training-gulp/blob/feature/bs5/app/assets/style/all.scss) 範例有變更

### variables.scss 客製化常用香東西
#### 顏色
* 主要控制處為：`$theme-colors`
* 變更預設 → 新增變數：**各種 class 都自動產生(SCSS 內建功能)**
#### 圓角
* 啟用圓角效果：`$enable-rounded: true;`
#### 陰影
* 關閉陰影效果：`$enable-shadows: false;`
#### 間距 $spacer
```sass=
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * .25,   //4px
  2: $spacer * .5,    //8px
  3: $spacer * .75,   //12px 
  4: $spacer,         //16px
  5: $spacer * 1.125, //18px
  6: $spacer * 1.25,  //20px 
  7: $spacer * 1.5,   //24px
  8: $spacer * 1.75,  //28px
  9: $spacer * 1.875, //30px 
  10: $spacer * 2,    //32px
  11: $spacer * 2.25, //36px 
  12: $spacer * 2.5,  //40px
  13: $spacer * 3,    //48px
  14: $spacer * 3.5,  //56px
  15: $spacer * 4,    //64px
  16: $spacer * 4.5,  //72px 
  17: $spacer * 5,    //80px
  18: $spacer * 5.5,  //88px
  19: $spacer * 6,    //96px
  20: $spacer * 6.5,  //104px
  21: $spacer * 6.875,//110px
) !default;
```
#### 全域 a 連結 link
* 全域連結顏色：
`$link-color: $primary !default;`
* 顯示/關閉下底線：
    *`$link-decoration: underline !default;`
    *`$link-decoration: none;`
#### 字體
* 先放＂英文字體＂再放＂中文字體＂
```sass=
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

$font-size-base: 1rem !default;
```

### 【回答學員問題】若 HTML 上有許多 utilities class，是否有建議的優先順序？
* **自訂 class** (ex. productList) > **元件** (ex. card) > **顏色** (ex. text-primary) > **util** (margin 類寫一起) (padding 類寫一起)


## 第六週主線任務

* <a href="https://rpg.hexschool.com/training/21/task?type=detail&id=208" target="_top">第六週 - 藝術展覽</a>


備註一：可觀看 [作業設計稿 -  線上預覽操作教學](https://hackmd.io/J7ajdobzTlyideAARTLz5Q?view)

備註二：線上網址圖片，這裡六角已經上傳到[圖片空間](https://github.com/hexschool/webLayoutTraining1st)，本次作業圖片都放在 **exhibition-week6 資料夾**，網址如下，其他以此類推：
* https://hexschool.github.io/webLayoutTraining1st/week1/photo.png 
* https://hexschool.github.io/webLayoutTraining1st/week1/line.svg

>補充：[如果不知道怎麼找到圖片路徑請點我](https://i.imgur.com/O7nQcFm.gif)





