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
• 常見觀念：整體格線邏輯是一致