0%

21天Bootstrap5新手實戰營-格線系統(下)

1. 格線系統斷點設計

下面區塊你會切6還是12呢?
2021_05_22_01_41_01_697.png

12比較好,未來字長度變了,還有空間
老師也有可能只會用container , 連row 都不用

老師切版參考答案

2021_05_22_01_16_50_432.png

  • 網格系統再次強調不要動margin,padding
  • 可以在上面加顏色、背景圖片、文字樣式等等
  • col-4,col-8寫法 是手機優先的寫法
  • 我們在做網站通常都是從PC版的開始開發,會從md大小開始
  • 若想先做 PC 版,可用 md、lg 當起手式
  • 老師斷點通常會寫3個,比如當md,lg不滿足就會是手機版格式

2. 格線系統與元件整合

Untitled.png

  • 容器裡放元件
  • 鉛筆盒 是容器 象皮擦是元件

3. 容器與元件分離? 內容與樣式分離?

這樣寫有沒有問題?
2021_05_22_02_00_49_631.png

容器與元件各司其職,拆開寫

2021_05_22_02_03_04_140.png

請說出容器與元件的行數
2021_05_22_02_04_43_916.png

4. 通用類別搭配

  • 我希望在md 平板大小時隱藏
  • 厲害之處是結合了斷點組合了常用的功能

2021_05_22_02_13_28_553.png

5. 問題時間-網站範例

六角學院

5.1. 判斷哪些地方有用到 .row 哪些地方沒有

2021_05_24_11_16_06_80.png

通常選單不會切row column,因為選單的選項會一直增加,要切column 會一直調整。可以使用導覽列 (Navbar)

5.2. 這個區塊會使用到row column 嗎?

2021_05_24_11_17_23_599.png

5.3. 有用到格線系統嗎?

2021_05_24_11_28_36_368.png

5.4. 補充說明

  • 另外Flex 也有通用類別
  • 老師習慣class 由小寫到大(手機到平板到桌機)
  • 範例
    2021_05_24_12_05_14_723.png

5.5. 表尾,會使用到格線系統嗎?


另外提醒,盡量不要算的剛好。
要自己買保險啊,孩子。
老師自己又說自己可以用boostrap 的其它方式達成,不見得一定要用格線系統
2021_05_24_12_27_48_867.png

  1. 會嗎?
  • 答案

2021_05_24_12_31_02_351.png

5.6. 有用到格線系統嗎??


2021_05_24_12_33_22_499.png

補充說明:

在boostrap版型應該都有要格線。

像button 的部分 設計師沒有follow 格線系統,因此我們自己在切版的時候,就可以照自己的方式達到就好

2021_05_24_12_36_13_651.png

5.7. 會用到格線系統嗎??

不會
2021_05_24_12_42_14_733.png

補充說明:

如果自己要開版設計稿,格線的圖可以哪裡找?

可用軟體如下

  • Adobe XD
  • sketch
  • figma

Free Bootstrap Templates

5.8. 需要格線系統嗎?


2021_05_24_12_45_33_367.png

6. 問題解答 column 再包row column 能不能?

2021_05_24_13_21_12_769.png

7. 主線及每日任務

7.1. 通用類別前3名

  • display
  • flex
  • spacing