Bootstrap# 3– 網格系統之一

Thomas Hung

Published in

Thomas 學習筆記

9 min readJun 21, 2020

在上一章節我們有大概提到 Bootstrap 中的排版系統，今天就來好好說明這個功能的使用方式吧！

在 Bootstrap 排版系統我們稱為 Grid 網格，它是由行與欄組合成的基本架構如下 :

//**HTML**
<div class="container">
 <div class="row">
  <div class="col">//內容...</div>  
 </div>
</div>

我們可以透過 .container 基本容器來置中容器內的子元素，此容器的樣式透過 padding-left 與 padding-right 屬性值為 15px 與 .row 樣式屬性 margin-left 與 margin-right 的屬性值為 -15px ，來達成水平置中的效果。此 .container屬性會定義固定寛度如果要使用滿版效果，可以使用 .container-fluid 達成。

在這裡我們舉個範例來說明。

.container {
 width: 100%;
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
 max-width: 1140px; //此最大寛度會隨螢幕大小而改變
}

此時 .container 容器寛度為 1110px ，由於有 padding-left 與 padding-right 屬性值為 15px 須減去，所以寛度為 1140px-30px 。

.row 屬性稱為行，它是包住 .col 屬性的水平群組，在樣式中 margin-left 與 margin-right 的屬性值為 -15px，是用來確保內容正確對齊。

.row {
 display: flex;
 flex-wrap: wrap;
 margin-right: -15px;
 margin-left: -15px;
}

由於margin-left 與 margin-right 的屬性值為 -15px ，將 .container 容器寛度推回 1140px。

.col 此屬性為欄，在樣式中透過 padding-left 與 padding-right 屬性值為 15px。

.col {   
 position: relative;   
 flex-basis: 0;  
 flex-grow: 1;   
 max-width: 100%;   
 width: 100%;   
 min-height: 1px;   
 padding-right: 15px; /* $grid-gutter-width */  
 padding-left: 15px;  /* $grid-gutter-width */ 
}

由於有 padding-right 和 padding-left 所以內容的寬度又變回 1110px。

.col 此屬性中的 padding 來做出間距 gutter 的效果，如下圖每欄白色區。塊部份。

在 Bootstrap 排版系統中有個響應式系統，它是為了實現不同尺寸大小裝置都能達成排版效果而產生的，我們稱它為響應式斷點。我們可以從 Bootstrap 4 的 _variables.scss 文件中去了解。

$grid-breakpoints: (
 xs: 0,
 sm: 576px,
 md: 768px,
 lg: 992px,
 xl: 1200px
) !default;

Bootstrap 4 中有以上 5 個斷點分別為 xs(預設值)、sm、md、lg、xl，我們可以透過修改方式來刪除或新增屬性值，並使用以上的斷點來優先使用於行動裝置中。

/*@media (max-width: 575.98px) { ... }*/
@include media-breakpoint-up(xs) { ... }/*@media (min-width: 576px) and (max-width: 767.98px)*/
@include media-breakpoint-up(sm) { ... }/*@media (min-width: 768px) and (max-width: 991.98px)*/
@include media-breakpoint-up(md) { ... }/*@media (min-width: 992px) and (max-width: 1199.98px)*/
@include media-breakpoint-up(lg) { ... }/*@media (min-width: 1200px)*/
@include media-breakpoint-up(xl) { ... }

在這裡我們可以從 Bootstrap 4 的 _variables.scss 文件中去了解它的欄位數量與欄間距。

$grid-columns:                12 !default;
$grid-gutter-width:           30px !default;

在 Bootstrap 4 欄共有 12 格，每個欄間距為 30px，我們可以在看看不同斷點的 container 容器欄位的最大寛度。

$container-max-widths: (
 sm: 540px,
 md: 720px,
 lg: 960px,
 xl: 1110px
) !default;

這裡要注意最大寛度要小於或等於斷點，不可以大於斷點。

以上我們了解基本網格系統現在就來排版吧！

<div class="container">
 <div class="row text-center">
  <div class="col-3">
   <div class="bg-primary" style="height:100px;line-height: 100px;">1</div>
  </div>
  <div class="col-3">
   <div class="bg-danger" style="height:100px;line-height: 100px;">2</div>
  </div>
  <div class="col-3">
   <div class="bg-success" style="height:100px;line-height: 100px;">3</div>
  </div>
  <div class="col-3">
   <div class="bg-warning" style="height:100px;line-height: 100px;">4</div>
  </div>
 </div>
</div>

上圖使用 .col-(欄位數) 屬性去呈現出想要的排版樣式。此時可以搭配響應式來設計排版樣式。

<div class="container mt-5">
 <div class="row text-center mb-5">
  <div class="col-md-3">
   <div class="bg-primary" style="height:100px;line-height: 100px;">1</div>
   </div>
  <div class="col-md-3">
   <div class="bg-danger" style="height:100px;line-height: 100px;">2</div>
   </div>
  <div class="col-md-3">
   <div class="bg-success" style="height:100px;line-height: 100px;">3</div>
   </div>
  <div class="col-md-3">
   <div class="bg-warning" style="height:100px;line-height: 100px;">4</div>
   </div>
  </div> <div class="row text-center">
  <div class="col-sm-6">
   <div class="bg-primary" style="height:100px;line-height: 100px;">1</div>
   </div>
  <div class="col-sm-6">
   <div class="bg-danger" style="height:100px;line-height: 100px;">2</div>
   </div>
  <div class="col-sm-6">
   <div class="bg-success" style="height:100px;line-height: 100px;">3</div>
   </div>
  <div class="col-sm-6">
 <div class="bg-warning" style="height:100px;line-height: 100px;">4</div>
  </div>
 </div>
</div>

搭配響應式 .col-(斷點)-(欄位數)來設計排版樣式。

Extra small（< 576px）：.col-
Small（≥ 576px）：.col-sm-
Extra small（≥ 768px）：.col-md-
Large（≥ 992px）：.col-lg-
Extra large（≥ 1200px）：.col-xl-

…

參考： bootstrap

以上是我對 Bootstrap# 3– 網格系統之一 的學習筆記 😉。

***如果有任何想法，也歡迎留言與我分享~

***也謝謝你(妳)的閱讀，覺得有幫助的話別忘了順手拍個手喔！***

Bootstrap# 3– 網格系統之一

Written by Thomas Hung