欄column (上)筆記Day -2


BS5格線系統基本架構

  • container, row, col

.container容器(外層一定要有一層container)

  • 不然會出現可怕的水平x軸!!!!!
  • 上圖已載入BS5 CDN
  • 當我們在模板上創建一個高度100px的div-box,它會依據block特性佔據整行(1440px全寬)
    • 接著,我們依序加入BS5的container容器在外層
    • BS5格線系統的容器container加入之後,會限制這個區塊的寬度(1296px),並且不會讓它貼齊網頁邊緣
  • .container-fluid接近滿版 但仍會留有gutter on outside

.row

  • 要啟用BS5格線系統就是在container之後,加入row這個橫列的概念,就表示啟用了bs5的格線系統

.col

  • 預設為12欄
  • 限制單欄寬度:.col-*
    • .col-1 佔一欄的空間
    • .co-2 佔兩欄的空間
  • 當我們欄線超過12欄時,格線就會自動換行

  • 當你沒有設定.col時,格線系統中的欄會呈現每一欄都是滿版的div疊下來

  • 等寬欄 .col-* (1-12)當我們沒有設定.col後面的數字,或當我們很確定欄位的數量並且要製作等寬的形式,也可以這樣寫:

  • 彈性col-auto寬度(依據內容寬作彈性)

巢狀

  • bs5是可以巢狀的,只是要在col內加入row啟用格線系統後,他會在外層的col所分配到的空間裡去分配巢狀後的col寬度

切版直播班第六週格線系統筆記

  • 排版三劍客: .container、.row、.col-1~12
  • .container 容器
    • .container 固定寬度
    • .container-fluid 滿版
  • .row
  • no-gutters:不需要 gutters
  • 名言 1:.col- 的外層只能是 .row
  • 名言 2:.row 裡面只能是 .col-
  • 名言 3:網頁內容與元件請放在 .col- 裡面
  • 常見錯誤,在 .col 增加寬度
  • 常見錯誤,在格線系統調整左右 margin 與 padding

  • 常見觀念:可以加上下 的 margin 與 padding

  • 常見觀念:最外層至少補一個 container
  • 常見觀念:整體格線邏輯是一致






你可能感興趣的文章

沒有高低之分 只有先後順序

沒有高低之分 只有先後順序

ASP.NET Core Web API 入門教學 - 同時取得父子資料

ASP.NET Core Web API 入門教學 - 同時取得父子資料

GoDaddy SSL 憑證購買及安裝在 Sails.js

GoDaddy SSL 憑證購買及安裝在 Sails.js






留言討論