1. 活動連結
2. 格線
容器就讓他回歸於容器
元件就讓他回歸於元件
選單通常不會用col 去排
class 小寫到大
寫東西不要寫剛好，在不同瀏覽器差1px就會斷行，幫自己買保險
設計師應該要用格線系統
軟體
figma,adobe xd
3. PC 優先與手機優先之寫法介紹
桌面版優先是指樣式書寫順序為: 先寫最大寬度上限(EX: max-width:1440px) 當所有樣式寫完 最後再依序寫
1 | @media (max-width:992px) {...} |
手機優先是指樣式書寫順序為: 先寫最小固定寬度(通常都是: width:100% or width:100vw) 當所有樣式寫完 最後再依序寫
1 | @media (min-width:768px) {...} |
4. 格線系統(上)
常開的版型是1140px，水平居中，所以可以用container class
col-4 ,col-5 這樣寫是在寫手機
boostrap5 是手機優先
通常在寫的時候會先寫桌機版
老師自己寫的時候，斷點的col 最多寫3個
老師比較常用md ,lg
sm,xxl 比較少
4.1. 奇幻數字
切版有了203、408 這種魔術數字，於有人發明了格線系統，解決自由發展的困擾
5. 格線系統
- 目的是為了減輕 magic number 出現
- 可以解決重複code問題
- 格線系統關鍵字：column(欄)、gutter(間距)
- 960 grid
- 使用float 方式進行格線系統設計
- 故意多1px，就會換行囉，這個就是float的特性
Bootstrap5 也是用float 特性設計的哦 12:26
格線系統就是column + gutter 的加總
格線系統有11個gutter
為什麼要設計12欄
- 因為比較好整除
- 2,3,4,6欄好整除
gutter 產生方式
- 有時候會用padding
- 有時候會用margin
- 960 grid 網站就是用margin-left,margin-right 左右各推10，產生20的空間
- Bootstarp 本來是用padding 去推的
- 每個格線系統推的方式可能有所不同，之後在設計上要注意。
6. 切版方式的演進
- table + table
- float
- inline block
- flexbox
- grid
7. 格線系統三劍客
- container
- row
- column
- Boostrap 是用box-sizing: border-box;
8. 格線系統名言
- row的下一層一定要是column
- column的上一層一定要是row
- 網頁內容與元件請放在.col-裡面
9. 常見錯誤
在 .col 增加寬度
在格線系統調整左右 margin 與 padding
常見觀念
- 可以加上下 的 margin 與 padding
- 最外層至少補一個 container
- 整體格線邏輯是一致
10. 格線觀念考驗時間
請問這樣寫對還是錯?
對
請問這樣寫對還是錯？
對
請問這樣寫對還是錯?
錯
會斷行還是不會斷行?
會,因為row有flex-wrap:wrap屬性
上面的版本對，還是下面的版本對，還是都對?
上面的版本對，因為跟後端邏輯設計有關
提醒：flex-wrap 自己會往下換行
對還是錯？
錯
對還是錯？
錯，沒有下container
對還是錯?
是ok的
對還錯?
對的，其中第三個footer 沒有一定要求水平居中，有可能需求會需要滿版設計
對還錯?
對
header ,footer 想要滿版
container 裡面符合名言