iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 19
1
Modern Web

For 前端小幼苗的圖解筆記系列 第 19

[CSS] RWD 網格系統

網格系統概念

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-firstorder -0→ ...→ order-12order -last

  • 未指定時預設為 order-0

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

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

參考資料:


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


上一篇
[HTML] 圖解 Table 結構
下一篇
[心得] 轉職工程師的內心戲
系列文
For 前端小幼苗的圖解筆記30

尚未有邦友留言

立即登入留言