iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
Modern Web

前端網頁設計學習旅程系列 第 23

Day23_Grid System

Grid System

在 Bootstrap4 的 Layout 使用的是 CSS flexbox 來達到排版的效果,因此建議可以先瞭解 flexbox 屬性的,flex-container 和 flex-items 的意義,將能夠更快理解 Bootstrap4。

範例網站

首先看幾個排版的範例
在一般瀏覽器呈現的效果
https://ithelp.ithome.com.tw/upload/images/20201005/20130503eReWuHg90v.png

會依據版面大小,自動調整呈現方式
https://ithelp.ithome.com.tw/upload/images/20201005/20130503RRlK0818Ox.png

在另一個網站上也有類似的效果
https://ithelp.ithome.com.tw/upload/images/20201005/201305033qkLW736Rg.png

https://ithelp.ithome.com.tw/upload/images/20201005/20130503lOPOIkbRpj.png

單行等寬Grid

先從基本的開始,下面程式碼定義三個等寬的網格(Grid)

<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>

https://ithelp.ithome.com.tw/upload/images/20201005/201305035k5KWK48X7.png

多行等寬Grid

類似的概念,套用在多行等寬的Grid也不是問題

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

https://ithelp.ithome.com.tw/upload/images/20201005/20130503trthqBwhs4.png

寬度不同 Grid

如果要定義某個Grid跟其他不同,給予不同的class名稱前綴就可以辦到

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

https://ithelp.ithome.com.tw/upload/images/20201005/20130503LWYlQKCMlD.png


上一篇
Day22_Bootstrap-Nav Bars
下一篇
Day23_Bootstrap-Flexbox
系列文
前端網頁設計學習旅程30

尚未有邦友留言

立即登入留言