Bootstrap# 4– 網格系統之二

此章節我們來學習 Bootstrap 4 網格中的通用類別。

間距 No gutters

此屬性可以移除網格中預設的間距。

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

排序 Order classes

使用 .order - number 可以位移欄位的順序，此屬性也附有響應式排版，使用 .order - 斷點 - number 方式透過不同的斷點來控制欄位順序。

<div class="container my-5">
 <div class="row text-center">
  <div class="col-4">
   <div class="bg-danger" style="height: 100px;line-height: 100px;">1</div>
   </div>
  <div class="col-4 order-12">
   <div class="bg-info" style="height: 100px;line-height: 100px;">2 (order-12)</div>
   </div>
  <div class="col-4">
   <div class="bg-success" style="height: 100px;line-height: 100px;">3</div>
  </div>
 </div>
</div>

此時我們可以發現到在元素內設定 .order-12 會排序到最後，就如數線一樣數字越大排序欄位越往右邊。

還可以透過斷點方式讓欄位呈現出響應式排版。

<div class="container my-5">
 <div class="row text-center">
  <div class="col-4">...</div>
  <div class="col-4 order-md-3">...</div>
  <div class="col-4">...</div>
 </div>
</div>

當瀏覽器尺寸大於 768px 時，第二個欄位移到最後。

欄的推移 offset Class & margin

使用方式與 排序 Order classes 大同小異，不同的是屬性會將元素向右移動欄位並增加元素左邊 margin 。

<div class="container">
 <div class="row flex-column text-center">
  <div class="col-4">
   <div class="bg-danger" style="height: 100px;line-height: 100px;">1</div>
  </div>
  <div class="col-md-4 offset-md-3">
   <div class="bg-info" style="height: 100px;line-height: 100px;">2</div>
  </div>
  <div class="col-lg-4 offset-lg-5">
   <div class="bg-success" style="height: 100px;line-height: 100px;">3</div>
  </div>
 </div>
</div>

間隔 (Spacing)

在 Bootstrap 的通用類別中有個功能為 間隔 (Spacing)，來看看它有哪些可以使用的方法吧。

簡寫響應式 margin、padding 的通用類別屬性設定:

• m : 設定 margin
• p : 設定 padding

邊緣設定:

• t : 設定 top
• b : 設定 bottom
• l : 設定 left
• r : 設定 right
• x : 設定水平軸 left 與 right
• y : 設定垂直軸 top 與 bottom
• 空白 : 如果只有單純 margin 與 padding 代表設定四邊

尺寸 設定:

$spacer: 1rem !default;
$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
 (
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3)
 ),
 $spacers
);

在尺寸設定裡有個屬性值 auto 要特別說明的來看看範例。

<div class="container mt-5">
 <div class="row text-center">
  <div class="col-3">
   <div class="bg-danger" style="height: 100px;line-height: 100px;">1</div>
   </div>
  <div class="col-3 ml-auto">
   <div class="bg-success" style="height: 100px;line-height: 100px;">3</div>
  </div>
 </div>
 <div class="row text-center mt-3">
  <div class="col-3 ml-auto">
   <div class="bg-danger" style="height: 100px;line-height: 100px;">1</div>
   </div>
  <div class="col-3">
  <div class="bg-success" style="height: 100px;line-height: 100px;">3</div>
  </div>
 </div>
</div>

Flex

除了先前所說基本 Bootstrap Grid system 網格系統，在 Bootstrap 中還可以單純的使用 Flex 屬性類別來操作，此功能在 Bootstrap 的通用類別中有個功能為 Flex。

基本使用 Bootstrap 內鍵 Flex 類別功能

<div class="d-flex">...</div>  //block 與 flex
<div class="d-inline-flex">...</div> // 

.d-inline-flex 此屬性類似於 inline-block 與 flex 的結合。

在這裡就列出所以的屬性:

• 設定 flex-direction 的響應式如: .flex-sm-row

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
<div class="d-flex flex-row">...</div>

• 設定 flex 容器中主軸對齊的響應式如: .justify-content-sm-center

justify-content-start 
justify-content-center
justify-content-end
justify-content-between
justify-content-around
<div class="d-flex justify-content-start">...</div> 

• 設定 flex 容器中交錯軸對齊的響應式如: .align-item-sm-center

.align-item-start
.align-item-center
.align-item-end
.align-item-baseline
.align-item-stretch
<div class="d-flex align-item-start">...</div>

• 設定 flex 容器中交錯軸自身對齊的響應式如: .align-self-sm-center

.align-self-start
.align-self-center
.align-self-end
.align-self-baseline
.align-self-stretch
<div class="d-flex">
 <div class="align-self-end">...</div> //子元素中設定
</div>

• 設定 flex 容器中強制設定子元素寛度佔滿父層容器寛度的響應式如: .flex-sm-fill

<div class="d-flex bg-info m-5">
 <div class="p-2 flex-fill bg-danger">內文多寛就越大內文多寛就越大</div>
 <div class="p-2 flex-fill bg-success">內文少</div>
 <div class="p-2 flex-fill bg-warning">內文少</div>
</div>

• 使用 margin 的位移方式

//水平軸
<div class="d-flex border m-5">
 <div class="p-2 mr-auto bg-danger">1</div>
 <div class="p-2 bg-success">2</div>
 <div class="p-2 bg-warning">3</div>
</div>
//交錯軸
<div class="d-flex flex-column border m-5" style="height: 400px;">
 <div class="p-2 bg-danger">1</div>
 <div class="p-2 mb-auto bg-success">2</div>
 <div class="p-2 bg-warning">3</div>
</div>

• 改變 flex 容器中是否換行的響應式如: .flex-sm-wrap

.flex-wrap
.flex-nowrap
.flex-wrap-reverse
<div class="d-flex flex-wrap">...</div>

• 改變 flex 容器中子元素排序位置的響應式如: .order-sm-2

.order-0
...
...
.order-12

• 設定 flex 容器中多行交錯軸對齊的響應式如: .align-content-sm-center
• 須注意此屬性要設定 .flex-wrap 才有效果

.align-content-start
.align-content-center
.align-content-end
.align-content-around
.align-content-stretch
<div class="d-flex align-content-end flex-wrap border m-5" style="width: 200px;height: 400px;">
 <div class="p-2 bg-danger">1</div>
 <div class="p-2 bg-success">2</div>
 <div class="p-2 bg-warning">3</div>
 <div class="p-2 bg-primaty">4</div>
 <div class="p-2 bg-info">5</div>
 <div class="p-2 bg-light">6</div>
</div>

…

參考： bootstrap-Flex 、 間隔 (Spacing) 

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

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

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