Skip to main content

[BS4] Bootstrap4 Utilities

間隔(Spacing)#

keywords: {property}{sides}-{size}, {property}{sides}-{breakpoint}-{size}#
  • 針對 xs 可以使用 {property}{sides}-{size}
  • 針對 sm, md, lg,xl 可以使用 {property}{sides}-{breakpoint}-{size}
  • property: 可以使用 mp,也就是 margin 和 padding
  • sides: 可以使用 t, b, l, r, x, y, blank,分別表示 top, bottom, left, right, 同時設定 lr,同時設定 tb,和同時設定全部。
  • size:可以使用 0 ~ 5auto,表示 $spacer * 0 , $spacer * .25, $spacer * .5 , $spacer * 1 , $spacer * 1.5, $spacer * 3
  • $spacer 預設是 1rem
    • 範例:.m-auto, .mx-auto, .py-1, .mx-4, ...

深入 Bootstrap#

// ./scss/_variables.scss// Spacing
$spacer: 1rem !default;$spacers: (  0: 0,  1: (    $spacer * 0.25,  ),  2: (    $spacer * 0.5,  ),  3: $spacer,  4: (    $spacer * 1.5,  ),  5: (    $spacer * 3,  ),) !default;

Display Utilities#

keywords: .d-{type}, .d-{breakpoint}-{type}#
  • type: 包含 none, inline, inline-block, block, table, table-cell, flex, inline-flex

Flexbox Utilities#

方向(direction)#

keywords: flex-{row|col}-{direction}, flex-{breakpoint}-{row|col}-{direction}#
  • direction: blank, reverse
  • 範例: flex-row, flex-row-reverse, flex-column, flex-column-reverse, flex-sm-column-reverse

水平對齊(justify-content)#

keywords: justify-content-{type}, justify-content-{breakpoint}-{type}#
  • type: start, center, end, between, around
  • 範例: justify-content-start, justify-content-sm-end

垂直對齊(align-items)#

keywords: align-items-{type}, align-item-{breakpoint}-{type}#
  • type: start, center, end, baseline, stretch

自身對齊(align-self)#

keywords: align-self-{type}, align-self-{breakpoint}-{type}#
  • type: start, center, end, baseline, stretch

多行對齊(align-content)#

keywords: align-content-{type}, align-content-{breakpoint}-{type}#
  • 需要多行的 flex-items 才能使用,所以要搭配 .flex-wrap
  • type: start(default), end, center, between, around, stretch

搭配 margin auto 使用#

與 justify-content 搭配#

justify-contentmargin-right: automargin-left: auto 混合,可以將 flex-item 推到另一端:

<div class="d-flex justify-content-end">  <div class="mr-auto p-2">Flex item</div>  <!--  這個 flex item 會被推到左邊  -->  <div class="p-2">Flex item</div>  <div class="p-2">Flex item</div></div>
<div class="d-flex justify-content-start">  <div class="p-2">Flex item</div>  <div class="p-2">Flex item</div>  <div class="ml-auto p-2">Flex item</div>  <!--  這個 flex item 會被推到右邊  --></div>

與 align-items 搭配#

混合以下屬性 align-items, flex-direction: column, 和 margin-top: automargin-bottom: auto,會將一個 flex 物件移動到容器的頂部或底部:

<div class="d-flex align-items-start flex-column" style="height: 200px;">  <div class="mb-auto p-2">Flex item</div>  <div class="p-2">Flex item</div>  <!--  這個 flex item 會被推到下面  -->  <div class="p-2">Flex item</div>  <!--  這個 flex item 會被推到下面  --></div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">  <div class="p-2">Flex item</div>  <!--  這個 flex item 會被推到上面  -->  <div class="p-2">Flex item</div>  <!--  這個 flex item 會被推到上面  -->  <div class="mt-auto p-2">Flex item</div></div>

換行(Wrap)#

keywords: .flex-{type}, .flex-{breakpoint}-{type}#
  • Type: nowrap, wrap, wrap-reverse

  • 範例:.flex-nowrap.flex-wrap.flex-wrap-reverse

排序#

keywords: .order-{number}, .order-{breakpoint}-{number}#
  • number: 介於 1 ~ 12
  • 範例:.order-xl-7, .order-md-8

參考#