網格系統概念

1. Grid system 網格系統

• 將網頁布局寬度分為 12 等分，每個區塊以n/12呈現
• 
  (圖片來源)

2. @media 媒體查詢(斷點設置)

• 設計斷點，控制在不同的裝置套用不同的欄數排版
  - @media 媒體查詢
  • (min-width)：當大於這個尺寸時…
  • (max-width)：當小於這個尺寸時…
  • 吃栗子：大於 768px 小於 990 px：
    (min-width: 768px) and (max-width: 990px)：

    @media screen and (min-width: 768px) and (max-width: 990px){ 
      p{
            ...
       }
     }
    

3. 配置順序

• 先從小裝置設計到大裝置

Bootstrap Grid System 快速應用

觀念

• Bootstrap中所有橫向排列的物件都是使用 Flex 排版
  • 一組 Flex - 一個父容器 （display:flex）＋N個子容器（定義子容器的欄數）
• 設計排版欄數以最小畫面→最大畫面
  （預設的 col 視為手機版畫面）
• 格線系統原則
  

實作基本格線排版）

• 以 Class 配置 HTML 結構：container > .row > .col
  (以下為 Pug 寫法)

  .container
      .row      
          .col 
              .item
          .col
              .item
          .col
              .item
  

  • 最外層容器：.container（有 padding） 或 .container-fluid （無 padding、滿版）
  • .row 為 flexbox（display : flex）
  • .col 指定欄數 .col-12.col-md-10 等

欄數定義（col-n）

• 同層的 col 相加要等於 12 ，如果沒指定數字（N/12）則自動依未指定的 col 數均分

  • [栗子]一個row裡面3個col未指定占欄數(col-n)，則每col自動成1/3（等同於 .col-4）：

    .container
        .row  
            .col  <-等同於.col-4
            .col  <-等同於.col-4
            .col  <-等同於.col-4
    

    (12欄3等分=每欄佔4/12)

  • [栗子]也可以部分指定、剩餘均分：

    .container
        .row
            .col    <-  同層級未指定欄數自動均分(12-4)/2
            .col-4  <- 佔4/12
            .col    <-(12-4)/2
    

  • [栗子]定義不同尺寸下各自的佔欄比數

    .container
        .row
        .col-12.col-md-4   <-手機時滿版、768px以上(md)分3欄 （佔4/12）
        .col-12.col-md-4 
        .col-12.col-md-4   
    

個別指定同層級容器排列順序（order-n）

• 以order-n指定同排列順序

  （可應用在不同尺寸時定義不同的排序）

• 排序編號為 n 小到大，另有 first ( 插最前 )＆ last ( 插最後)：
  order-first → order -0→ ...→ order-12 → order -last

• 未指定時預設為 order-0

• 同時指定兩個相同時後者生效
  [栗子]

  .row
      .col
      .col.order-last
      .col.order-last  <-後者生效
      .col
  

參考資料：

• Grid system · Bootstrap
• w3big

個人 Blog: https://eudora.cc/