# BS4 格線系統與 SCSS 結構設計
## 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

> 69
## [BS4 格線系統](https://bootstrap.hexschool.com/docs/4.2/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
> 常見觀念：整體格線邏輯是一致
## BS4 格線斷點設計
* [文件位置](https://bootstrap.hexschool.com/docs/4.2/layout/grid/#grid-options)
* 簡報說明 > Live Demo 檢視

> 卡斯伯常用版型 md、lg
> 91

## 格線系統與元件整合

* 格線與卡片設計
* [範例處](https://codepen.io/liao/pen/abvaXyy?editors=1100)

## BS4 SCSS 編譯
* 下載 [BS4](https://github.com/twbs/bootstrap) 程式碼，修改變數
* 修改既有顏色變數
* 修改格線寬度

> 將 Demo 如何整合自己寫的 CSS

* 整合自己的 SCSS，載入 BS4 與自己的 SCSS
* bootstrap
* base
* layout
* component

## BS4 最終奧義
* 拋棄頁面功能，擁抱元件型 class
* 一開始用 BS4，會很想都手寫，建議格線用 BS4，元件自己挑合適的
* 需要練功的細節，如何將 Page 與 Layout 的內容都變成可復用的元件
* 避免過度設計化
* 在觀看別人的框架時，觀看他的設計思維與切入重點

## 編譯 [BS4 SCSS](https://github.com/twbs/bootstrap/tree/master/scss) ，用 [NPM 套件工具](https://bootstrap.hexschool.com/docs/4.2/getting-started/download/#npm)來安裝，[匯入方式](https://bootstrap.hexschool.com/docs/4.2/getting-started/theming/#importing)
步驟一：開啟新資料夾，將資料夾 cd 拉進終端機
步驟二：輸入指令 `npm init`，一直按 enter 後，資料夾裡面會多一個 `package.json` 檔
步驟三：安裝 BS4 套件，指令是 `npm install bootstrap`，安裝成功後會多一個 `node_modules` 資料夾
步驟四：@import BS4 SCSS 檔案，[連結處](https://bootstrap.hexschool.com/docs/4.2/getting-started/theming/#importing)

> 不要去修改 node_modules 裡面的檔案
> 需要使用到的項目直接 @import node_modules 的檔案
> 需要變更內容，請抓出來一份來進行 SCSS 編輯，並設為預設值 !default

### 結構

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "variables"; // 複製一份 variable 來覆蓋
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/bootstrap";

### JS CDN
* [最新版 JS](https://getbootstrap.com/docs/4.3/getting-started/introduction/)
### QA
Q：我上傳網站，需要上傳 node_modules 嗎？
Q：我上傳網站，需要上傳 SCSS 檔案嗎？