跳至主要内容

[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： 可以使用 m 或 p，也就是 margin 和 padding
  • sides： 可以使用 t, b, l, r, x, y, blank，分別表示 top, bottom, left, right, 同時設定 lr，同時設定 tb，和同時設定全部。
  • size：可以使用 0 ~ 5 和 auto，表示 $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-content 與 margin-right: auto 或 margin-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: auto 或 margin-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

參考​