文章提要

Grid 網格

| Grid 額外練習 : 網格系統 |

CH6 33

Equal-width | row 與 col 使用 line 74 + 打開以下註解顯示新的項目 line 92

  • 使用 Grid System 外層需用 row 內層需用 col
  • 不設定 col-數值 的數值,讓它自動延伸
  • Grid System 是使用 Flex ,這邊 col 沒有加數字,它會等比例去區分空間。範例中空間為 100% ,三個 col 會自動分為三等份
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Equal-width multi-line | w-100 分欄使用

  • w-100width : 100% ;
  • 原本四個一列變上下兩列,每列各兩欄
<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div> <!--試試把此註解看變化-->
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Setting one column width | 把目標替換成 1~12 不等的數值 line 124

  • 如果 "目標" 設定 6,剩餘兩個 col 會去平分剩餘空間 ( 寬度 )
<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-目標">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Variable width content | 把目標替換成 auto line 142

  • col-{breakpoint}-auto : 依內容寬度決定 Grid 寬度
    • 內容寬度為 Variable width content
  • 把範例目標改成 auto 試試

// 未加入 auto 示意圖 ▼
Bootstrap-column未加auto

// 加入 auto 示意圖 ▼
Bootstrap-column加auto

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-sm-目標">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-目標">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

All breakpoints | 把目標替換成相加總合為 12 line 171

  • 除了不設定 col- 後方的數值讓它自動延伸外,也可設定加總為 12的數值。
<div class="container">
  <div class="row">
    <div class="col-目標">col</div>
    <div class="col-目標">col</div>
  </div>
</div>

| 把目標,替換成 md, sm 並調整視窗大小觀察變化 line 183 |

  • .col- 加入斷點 ( sm、md、lg、xl ) 變成響應式
  • col-sm-數值 → 576px 以上( 含 576 ) 呈現 8:4 兩欄格式,575px 以下( 含 575 ) 呈現兩列 width : 100%; ,以此類推
  • Bootstrap 斷點設定 Layout / Containers
<div class="container">
  <div class="row">
    <div class="col-目標-8">col</div>
    <div class="col-目標-4">col</div>
  </div>
</div>

| Grid 網格系統-垂直對齊 |

Bootstrap 路徑 : Grid / Vertical alignment

  1. 把目標,替換成 start, end , center 並調整視窗大小觀察變化 line 196

    • align-items 針對整體交錯軸的對齊
      <div class="container bg-light">
      <div class="row align-items-目標 h300">
      <div class="col">
      One of three columns
      </div>
      <div class="col">
      One of three columns
      </div>
      <div class="col">
      One of three columns
      </div>
      </div>
      </div>
  2. 把目標,替換成 start, end , center 並調整視窗大小觀察變化 line 214

    • align-self 針對單一元素交錯軸的對齊
    • Grid System 高度都會預設100%,所以這邊未設定目標值時,高度顯示是為 100% 。這邊目標填入start、center、end 高度就不會是 100% 而是依據內容調整高度
<div class="container bg-light">
  <div class="row h300">
    <div class="col align-self-目標">
      One of three columns
    </div>
    <div class="col align-self-目標">
      One of three columns
    </div>
    <div class="col align-self-目標">
      One of three columns
    </div>
  </div>
</div>

| Grid 網格系統-水平對齊 |

Bootstrap 路徑 : Grid / Horizontal alignment

  • 把目標,替換成 start, end , center 並調整視窗大小觀察變化 line 234
    <!--主軸對齊-->
    <div class="container bg-light">
    <div class="row justify-content-目標">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
    </div>
    </div>

| Grid 網格系統-No gutters |

Bootstrap 路徑 : Grid / No gutters

  • 把目標,替換成 no gutters 並調整視窗大小觀察變化 line 254
    • 把 Grid System 中間預設的 gutter 拿掉
      <div class="row 目標
      <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      </div>

| Grid 網格系統-order 排序 |

Bootstrap 路徑 : Grid / order

  • 把目標,替換成 1~12 的數值或 first, last line 264
    • 使用的是 flex 中 order 的屬性 。
    • 除了數字,也可套用 first , last,數值小的在前方
<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-目標">
      Second, but last
    </div>
    <div class="col order-目標">
      Third, but first
    </div>
  </div>
</div>

| Grid 網格系統- Offsetting column 推移 |

Bootstrap 路徑 : Grid / Offsetting column

  1. 把目標,替換 offset (偏移) line 284
    • offset-md-數值 ,後方數值為每個 column 的寬度 , md 也可自行更換想要的斷點
    • 加總不能超過 12
  2. 把目標,替換 ml-auto line 300
    • 會將 flex 之中的元素被推移到另一個頂端
    • .ml-auto , .mr-auto

//未加 margin 示意圖 ▼
Bootstrap-margin 示意圖01

//範例一 示意圖 ▼
Bootstrap-margin 示意圖02

//範例二 示意圖▼
Bootstrap-margin 示意圖03

<!--範例一  1會被推往右邊,2也連帶一起被推往右-->
<div class="container">
  <div class="row">
    <div class="col-md-4 ml-auto">1</div>
    <div class="col-md-4 ">2</div>
  </div>
</div>

<!--範例二 2 被推往右邊-->
<div class="container">
  <div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4 ml-auto">2</div>
  </div>
</div>

資料來源

最後修改日期: 2 3 月, 2020

作者