Bootstrap_GridSystem 配置版面

本文总阅读量次

定義網格規則

  • Bootstrap使用flexbox建立網格系統，符合響應式設計，並且能夠更方便的實現等高及對齊置中效果。

  • 定義列與行的語法，先決定外層row列數，再設定內層的寬度col，寬度bootstrap定義分成12等分， <div class="col-[裝置尺寸]-[寬度大小]">

  • 定義螢幕尺寸(xs, sm, md, lg)

範例：<div class=”col-md-6> 在md的大小時會佔據6/12一半的寬度(深綠色)，程式碼如下:

1
2
3
4
5
6
7
<div class="row">
  <div class="col-md-12  text-center">12/12</div>
</div>
<div class="row">
  <div class="col-md-6  text-center">6/12</div>
  <div class="col-md-6  text-center">6/12</div>
</div>

垂直對齊容器位置

可以在.row的 class 加上：
左->align-items-start
右->align-items-end
中->align-items-center

水平調整容器位置

補充資料

  • 在預設的情況下，每一個欄（column）之間都會有間隙（gutter），透過在 .row 上加上 .no-gutters 即可去除

  • 我們可以在同一個 column 上給多的 class 來讓頁面在不同螢幕尺寸時有不同的排版：<div class="col-sm-4 col-md-8"></div>當螢幕尺寸為md以上時會以8/12顯示，sm則以4/12顯示