本文件連結：https://hackmd.io/AlgB3QHCRYutjpL1BsaZVA

## 課前說明

- React 直播班講師調整
- 為了確保同學們學習是有效的，課程作業、專題**禁止複製、挪用**他人程式碼、Wireframe 及未經授權的設計稿。
- 給切版班同學的優先折扣：「JS&React 培訓班」切版班（8/15 公開，僅有兩天）
- 作業怎麼做？一招心法，應對超複雜的開發需求
- https://liberating-turtle-5a2.notion.site/EP5-10db2c5e61e643c28cbc144cd7b73c9d?pvs=4

# 第六週 - 格線系統

- 記得錄影
- 公布全部完課率獎品
- React 課程講師調整
- 因此加碼一堂「React 前的 JS 核心知識」

## 截止繳交作業時間點

- 8/23 第八週上課結束
- 彩蛋課程 下週才會公布
- 9/8(日) 繳交截止日

## 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 出現

- 格線系統關鍵字：
- container(外層容器)
- column(欄)
- gutter(間距)


## [BS5 格線系統](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/)原理

### 通用類別 Utitilities

- Spacing：https://getbootstrap.com/docs/5.3/utilities/spacing/

### 格線系統

- 排版三劍客： .container、.row、.col 1~12
- .container
- .container 固定寬度
- .container-fluid 滿版
- .row
- .g-*：gutter 數值
- .col-
- col-{number}：所有裝置的格線系統
- .col-{中斷點}-{number}：依據不同中斷點進行調整
- 名言 1：.col- 的外層只能是 .row
- 名言 2：.row 裡面只能是 .col-
- 名言 3：網頁內容與元件請放在 .col- 裡面

#### 常見錯誤：

- 沒有正確了解容器、內容的觀念
- .col 外層不是 .row
- .row 的內層－不是 .col
- 另外調整格線系統的水平 margin、padding
- 在 .col 增加寬度
- 在格線系統調整左右 margin 與 padding
- 最外最少要有一個 .container

## 格線範例

名詞對齊：

- 3欄(three column)、三大欄..

神級技巧 [實作](https://www.figma.com/design/ZQn0etbtIsCrmkHqFeeLKo/%E5%88%87%E7%89%88%E7%9B%B4%E6%92%AD%E7%8F%AD---%E7%9B%B4%E6%92%AD%E6%95%99%E6%9D%90?node-id=381-2&t=IfpqkLHvLVZtnd9h-0)
- 基本
- 巢狀

## BS5 格線斷點設計

- 若想先做 PC 版，可用 md、lg 當起手式
- Bootstrap 正確用法：當 PC 端做好，行動版也一起完成了

> 補充：因為 Bootstrap 是手機優先，因此所有的 col-{中斷點}-* 都預設是 col-12

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

- [六角學院](https://www.hexschool.com/) - 判斷哪些地方有用到 .row 哪些地方沒有
- [甜點電商表尾](https://wcc723.github.io/F2E-PK/products.html) - 表尾設計 + row 裡面再加 .col
- [Bootstrap 如何運用格線系統](https://themes.getbootstrap.com/)

## 中場休息

## BS5 SCSS 載入 ([架構圖講解](https://whimsical.com/bs5-A1pswT87rkXs7peANUBVp6))

1. [SCSS default 觀念講解](https://codepen.io/hexschool/pen/oNWawom?editors=1100)
2. [六角 Vite 範例](https://github.com/hexschool/web-layout-training-vite/tree/main)，[Google Drive 下載連結](https://drive.google.com/file/d/1DKYr95ocy_1VzpoFfVE8XP1rH8PHL5uk/view?usp=sharing)


## 手寫 SCSS 結構參考

@import "variable";// 變數
@import "reset";  // reset.css

// 1. 元件(進階)* 或 Bootstrap
@import "button"; 
@import "..."; 

// 2. 雜項(進階)*
@import "utilities"; 

// 3. 共用樣式（如有 Bootstrap 通常不會寫這段）
@import "layout"; // 共同框架、第一層

// 4. 分頁樣式（可在此覆蓋 Bootstrap 樣式）
@import "index";
@import "page1";

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

### repo 有更動的地方

1. 多加入了一個 [bootstrap](https://github.com/hexschool/web-layout-training-vite/blob/feature/bootstrap5/package.json#L18) 模組
2. 多加入了一個 [bootstrap JS](https://github.com/hexschool/web-layout-training-vite/blob/feature/bootstrap5/main.js#L2)，讓 dist 編譯出來的 js 可以載入 BS5 JS 套件
3. [index.html](https://github.com/hexschool/web-layout-training-vite/blob/feature/bootstrap5/pages/index.html) 加入了些 BS5 範例元件
4. [SCSS](https://github.com/hexschool/web-layout-training-vite/blob/feature/bootstrap5/assets/scss/all.scss) 範例有變更

## 實戰調整技巧：

1. 全域調整
1. 色彩調整
2. spacing 調整
2. 隱藏設定啟動
1. 專案是否要加入圓角、漸層
3. 單一元件調整
1. 調整 navbar link 高度（由 $nav-link-height 反推需要修改值），這也會改到 $navlink
4. 額外注意
1. 按鈕、表單元件是等高的

## 第六週主線任務

[主線任務 作業設計稿](https://www.figma.com/design/zpJK5cEuejmXdd2Dyth3PC/2024-%E5%88%87%E7%89%88%E7%9B%B4%E6%92%AD%E7%8F%AD-W6---%E5%85%A7%E5%AE%B9%E8%A8%82%E9%96%B1%E7%B6%B2%E7%AB%99?node-id=5-4&t=fa5fWq65XPGTwkcP-0)（僅供有參加切版直播班同學授權）

jQuery、Bootstrap JS 互動效果：漢堡選單、Swiper 輪播效果、Bootstrap Navs and tabs 分頁切換

### 挑戰等級

LV 1｜任選兩頁含 RWD
LV 2｜至少做兩頁含 RWD，其中一頁必須為首頁
LV 3｜全部頁面都做，不需做 jQuery、Bootstrap JS 互動效果
LV 4｜全部頁面與效果都做