基礎格線觀念 筆記


網頁設計

  • 網頁不像平面設計是靜止不動的,會因為『使用者裝置大小』『瀏覽器顯示區域』『操作方式』都會改變內容或排版
  • 在網頁設計上的格線尺寸該如何分割?
  • 基礎格線系統

  • 設計軟體的欄數設定

  • 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寬度的空間
#bootstrap 5






你可能感興趣的文章

實作餐廳網站 FAQ 頁面

實作餐廳網站 FAQ 頁面

Vuex, Redux, Flux

Vuex, Redux, Flux

綜合能力測驗 - 破關紀錄

綜合能力測驗 - 破關紀錄






留言討論