Bootstrap

製作 Layout 時，由小畫面做到大畫面

Bootstrap官網
Container

綠底是 container 的範圍
max-width 1140px
padding-left padding-right 15px

紅底是 container padding 後的剩下的範圍

預設四個 breakpoint
Small devices (landscape phones, 576px and up)
Medium devices (tablets, 768px and up)
Large devices (desktops, 992px and up)
Extra large devices (large desktops, 1200px and up)

Extra small
576px		Small
≥576px		Medium
≥768px		Large
≥992px		Extra large
≥1200px
Max container widthNone (auto)540px720px960px1140px
# of columns12
Gutter width30px (15px on each side of a column)
Grid System
官方文件

Grid 裡每個 row ，也都是 padding-left padding-right 15px
Grid 會分成12等分

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
1
2
3

Grid 也可以不要 padding
1
2
3
4
5
6
7
8
9
10
11
12
Grid 不一定要填滿
1
2
3
Grid 可以針對不同的 breakpoint 決定要怎麼排版
手機版 1 列,桌機版 3 列
手機版 1 列,桌機版 3 列
手機版 1 列,桌機版 3 列

Container 也可以滿版 + Grid System
1
2
3
4
5
6
7
8
9
10
11
12
Container 也可以不要有 padding
1
2
3
4
5
6
7
8
9
10
11
12
官網型的專案，一定要出一份 Guideline
example
PSD 長寬要開多大 ?

解悉度不是重點，而且是要去思考網頁是會縮放

懶人包，完全走 bootstrap 規範，適合官網，表單型頁面

桌機大畫面，Extra large：PSD寬 1600px, Content 範圍 1140px

桌機/平版(landscape)，large：PSD寬 992px, Content 範圍 960px

桌機/平版(portrait)，Medium：PSD寬 768px, Content 範圍 720px

手機：PSD寬 750px, Content 範圍 720px

手機因為是 retina ，實際是 750px/2 ，請參考 apple 官方文件

這裡的現成的 bootstrap4 PSD grid template，點我

網頁最小字級是 12px, 手機最小字級是 24px
滿版網站或是極端尺寸要提供參考
RWD 是區塊移動，而不是等比縮放，只有圖片能等比縮放
疊在物件上的裝飾圖層不要設色彩增值/混色模式
單一 PSD 檔不要超過 500mb(避免前端程式無法開啟)
請使用微軟正黑/蘋方體字型檔排版，其他字型就只能切成圖片
麻煩要給客戶看之前，先找工程師討論 layout 的可能性