第六週 - 格線系統

• 報到 Code：jHYw7fHOtBfF
• 公布全部完課率獎品
• Gui Ting Liu 志工整理洧杰老師批改筆記
• 公布彩蛋課程，網站架站一條龍
  • 買網址、設定 DNS
  • SEO 關鍵字搜尋設計
  • Google Seach console 提交網站流程
  • Google analytics 分析服務綁定

截止繳交作業時間點

• 8/20 第八週上課結束
• 8/27(五) 彩蛋課程 下週才會公布
• 8/29(日) 繳交截止日
• 9/3(五) 版型發表會

BS5 格線系統

Mobile first 與 Desktop first 差別

• desktop first
• mobile first

格線系統 - 減輕 magic number 出現

• 格線系統關鍵字：column(欄)、gutter(間距)
• 960 grid，以前解析度都是 1024
• BS4 layoutit

常見總欄數是 12

BS5 格線系統原理

• 排版三劍客： .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. 鐵人邦滿版式設計搭配 BS5 格線
4. 六角右上角選單，以上課程都包含 5 欄居中
5. 表尾區塊是否寫死

BS5 格線斷點設計

• 文件位置
• 範例處
  

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

格線系統與元件整合

• 範例處
• 洧杰老師批改 BS5 幕資網頁

網站範例 + 通用類別搭配

• IT 邦幫忙 - 手機版時隱藏右側內容
• 六角學院 - 判斷哪些地方有用到 .row 哪些地方沒有
• 甜點電商表尾 - 表尾設計 + row 裡面再加 .col
• Bootstrap Template - 一次搞懂所有格線系統用法

中場休息

BS5 SCSS 載入 (架構圖講解)

1. SCSS default 觀念講解
2. 六角 Gulp 範例，請記得切換到 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 模組
2. 多加入了一個 bootstrap JS，讓 dist 編譯出來的 vendors.js 可以載入 BS5 JS 套件
3. layout.ejs、index.html 加入了些 BS5 範例元件
4. SCSS 範例有變更

第六週主線任務

• 第六週 - 藝術展覽

備註一：可觀看 作業設計稿 - 線上預覽操作教學

備註二：線上網址圖片，這裡六角已經上傳到圖片空間，本次作業圖片都放在 exhibition-week6 資料夾，網址如下，其他以此類推：

• https://hexschool.github.io/webLayoutTraining1st/week1/photo.png
• https://hexschool.github.io/webLayoutTraining1st/week1/line.svg

補充：如果不知道怎麼找到圖片路徑請點我