PJCHENder 未整理筆記

[BS] Bootstrap4 Utilities

2017-09-25

[BS] Bootstrap4 Utilities

@(CSS)[Bootstrap]

間隔(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

1
2
3
4
5
6
7
8
9
10
11
12
// ./scss/_variables.scss
// Spacing

$spacer: 1rem !default;
$spacers: (
0: 0,
1: ($spacer * .25),
2: ($spacer * .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 推到另一端:

1
2
3
4
5
6
7
8
9
10
11
<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 物件移動到容器的頂部或底部:

1
2
3
4
5
6
7
8
9
10
11
<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

參考

掃描二維條碼,分享此文章