1. 格線系統斷點設計
下面區塊你會切6還是12呢?
12比較好,未來字長度變了,還有空間
老師也有可能只會用container , 連row 都不用
老師切版參考答案
- 網格系統再次強調不要動margin,padding
- 可以在上面加顏色、背景圖片、文字樣式等等
- col-4,col-8寫法 是手機優先的寫法
- 我們在做網站通常都是從PC版的開始開發,會從md大小開始
- 若想先做 PC 版,可用 md、lg 當起手式
- 老師斷點通常會寫3個,比如當md,lg不滿足就會是手機版格式
2. 格線系統與元件整合
- 容器裡放元件
- 鉛筆盒 是容器 象皮擦是元件
3. 容器與元件分離? 內容與樣式分離?
這樣寫有沒有問題?
容器與元件各司其職,拆開寫
請說出容器與元件的行數
4. 通用類別搭配
- 我希望在md 平板大小時隱藏
- 厲害之處是結合了斷點組合了常用的功能
5. 問題時間-網站範例
5.1. 判斷哪些地方有用到 .row 哪些地方沒有
通常選單不會切row column,因為選單的選項會一直增加,要切column 會一直調整。可以使用導覽列 (Navbar)
5.2. 這個區塊會使用到row column 嗎?
會
5.3. 有用到格線系統嗎?
有
5.4. 補充說明
- 另外Flex 也有通用類別
- 老師習慣class 由小寫到大(手機到平板到桌機)
- 範例
5.5. 表尾,會使用到格線系統嗎?
會
另外提醒,盡量不要算的剛好。
要自己買保險啊,孩子。
老師自己又說自己可以用boostrap 的其它方式達成,不見得一定要用格線系統
- 會嗎?
答案
會
5.6. 有用到格線系統嗎??
有
補充說明:
在boostrap版型應該都有要格線。
像button 的部分 設計師沒有follow 格線系統,因此我們自己在切版的時候,就可以照自己的方式達到就好
5.7. 會用到格線系統嗎??
不會
補充說明:
如果自己要開版設計稿,格線的圖可以哪裡找?
可用軟體如下
- Adobe XD
- sketch
- figma
5.8. 需要格線系統嗎?
要
6. 問題解答 column 再包row column 能不能?
7. 主線及每日任務
7.1. 通用類別前3名
- display
- flex
- spacing