---
tags: 網頁切版直播班 - 2022 夏季班
---

# 第六週 - 格線系統
* 作業突破 800 份！
* 中場休息時公布全部完課率獎品
* [歷屆批改筆記](https://hackmd.io/48BTVPQVR_y4jq2E0PFHXQ?view)
* **本次切版班加碼**：8/14 後的每週日晚上 21:00~22:30 為加碼專題會議，用原本的 ZOOM 連結加入

## 截止繳交作業時間點
* 8/31 第八週上課結束
* 9/14(三) 23:59:59 作業截止繳交
* 9/16(三) 申請獎勵截止
* **9/18(日) 作品專題成果發表會**
* 9/19~9/23 廠商媒合

## BS5 格線系統

## Mobile first 與 Desktop first 差別

* [desktop first](https://codepen.io/liao/pen/WNQJVqr?editors=1100)
* [mobile first](https://codepen.io/liao/pen/jObxgeW?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.1/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
> 常見觀念：整體格線邏輯是一致

## 格線範例
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/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/screen/e9fba682-6449-4eb1-985a-0672717aaff4/specs/)
6. [第六週設計稿(1,3 頁面)](https://xd.adobe.com/view/ec5c5da0-6d93-4e78-bd3b-c8e9584fde44-b90f/screen/794dc4c5-a6f7-4c3e-8d91-29f2552effd2/specs/)
* [offset](https://bootstrap5.hexschool.com/docs/5.1/layout/columns/#offsetting-columns)

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

> 若想先做 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/) - 一次搞懂所有格線系統用法

## 中場休息

## BS5 SCSS 載入 ([架構圖講解](https://whimsical.com/bs5-A1pswT87rkXs7peANUBVp6))
1. [SCSS default 觀念講解](https://codepen.io/hexschool/pen/oNWawom?editors=1100)
2. [六角 Gulp 範例](https://github.com/hexschool/web-layout-training-gulp/tree/feature/bs5)，請記得切換到 feature/bs5 區塊，再按 Download

@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 安裝套件，此時裡面模組就都重新下載了

### 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) 範例有變更

## 第六週主線任務

* <a href="https://rpg.hexschool.com/training/30/task?type=detail&id=304" target="_top">第六週 - 程式家教</a>、<a href="https://xd.adobe.com/view/ec5c5da0-6d93-4e78-bd3b-c8e9584fde44-b90f/screen/8abe4f5e-6bcf-4391-b323-d4fb37b1509a/" target="_top">設計稿</a>、[圖片下載](https://github.com/hexschool/2022-web-layout-training)