網頁設計
- 網頁不像平面設計是靜止不動的，會因為『使用者裝置大小』『瀏覽器顯示區域』『操作方式』都會改變內容或排版
- 在網頁設計上的格線尺寸該如何分割？
基礎格線系統
設計軟體的欄數設定
BS5基礎欄位與gutter觀念
- BS5的col(column) width是彈性的格線，通常我們不會給它固定寬度，使用者裝置是固定的，手機平板電腦等等，column可以因為裝置不同有所適應變化
- 但是，BS5的gutter寬度空間是固定的，如果你設定gutter是30px接下來整個網頁設定的gutter都固定是30px
- 我們在設計網頁內容時，不會讓網頁內容貼齊四周的邊緣畫面上，會留有空隙，空隙通常是gutter on side（gutter width的一半）
- 頁面總寬960px是包含gutter on outside 左10 右10
繪圖軟體與格線之間的關聯性
- 所有內容都會壓在欄線上不會卡在gutter上
- BS5有提供container ，產生固定寬度並包含gutter on outside的容器也就是會為左右邊界保留空間讓畫面不會貼齊邊緣
- 當你縮減gutter的值，多的空間自動會補到column的寬
- 限制類型的container的寬是固定的例如960px，扣除掉gutter以及gutter on outside決定col的寬度空間以適應960px全寬
- 流體類型的container-fluid的col的寬度是不固定的，他會依據你裝置的視窗大小或瀏覽器的大小來決定每個gutter決定col寬度的空間
