Bootstrap5 ユーティリティ

Bootstrap 5 には、CSSコードを繰り返し書く必要なく、素早く効果を実現するための便利なクラスが多数用意されています。

---

背景色

さまざまな要素の背景色を設定するには、次のものが必要です。.text-*クラスを使用して、対応するテキストの色を設定します。

.bg-gradientクラスを使用すると、背景色のグラデーション効果を設定できます。

---

ボーダー

次を使用できます。border関連クラスを使用して、必要に応じてボーダーを表示します。

.border-1 到 .border-5クラスは、ボーダー線の幅を設定するために使用します。

以下は、ボーダーのさまざまな色を設定したものです。

rounded関連クラスは、角の丸みを設定するために使用します。

rounded-0 到 rounded-3クラスは、角の丸みのサイズを設定するために使用します。

---

フロートとフロートの解除

要素を右にフロートさせるには .float-end クラス、左にフロートさせるには .float-start クラスを使用します。.clearfix クラスはフロートを解除するために使用します。

画面サイズに基づいてフロート効果を設定することもできます（.float-*-left|right - * は sm (>=576px)、md (>=768px)、lg (>=992px)、xl (>=1200px)、xxl (>=1400px) を表します）。

---

中央揃え

使用します.mx-autoクラスを使用して要素を中央揃えにします（margin-left と margin-right を auto に設定します）。

---

幅と高さ

幅はw-* (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100)クラスを使用して設定します。

高さはh-* (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100)クラスを使用して設定します。

---

スペーシング

スペーシングの設定構文は次のとおりです。

{property}{sides}-{size}  // 适用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 或 xxl (>=1400px)

ブレークポイントは画面幅を指します: xs (<=576px)、sm (>=576px)、md (>=768px)、lg (>=992px)、xl (>=1200px)、または xxl (>=1400px)。

propertyプロパティを表し、以下が含まれます。

• m- 設定に使用margin
• p- 設定に使用padding

sides主に方向を指します：

• t- 設定に使用margin-top 或 padding-top
• b- 設定に使用margin-bottom 或 padding-bottom
• s- 設定に使用margin-left 或 padding-left
• e- 設定に使用margin-right 或 padding-right
• x- 設定に使用*-leftと*-right
• y- 設定に使用*-topと*-bottom
• blank - 要素の4方向の設定に使用margin 或 padding

sizeマージンのサイズを指します：

• 0- 設定margin 或 paddingために0
• 1- 設定margin 或 paddingために$spacer * .25
• 2- 設定margin 或 paddingために$spacer * .5
• 3- 設定margin 或 paddingために$spacer
• 4- 設定margin 或 paddingために$spacer * 1.5
• 5- 設定margin 或 paddingために$spacer * 3
• auto- 設定marginを auto に

一部のマージンのソースコード設定を見てみましょう。

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

その他の例

.m-# / m-*-#	すべての辺の外側の余白を設定	試してみる
.mt-# / mt-*-#	margin top	試してみる
.mb-# / mb-*-#	margin bottom	試してみる
.ms-# / ms-*-#	margin left	試してみる
.me-# / me-*-#	margin right	試してみる
.mx-# / mx-*-#	margin left と right	試してみる
.my-# / my-*-#	margin top と bottom	試してみる
.p-# / p-*-#	辺を使用して padding を設定	試してみる
.pt-# / pt-*-#	padding top	試してみる
.pb-# / pb-*-#	padding bottom	試してみる
.ps-# / ps-*-#	padding left	試してみる
.pe-# / pe-*-#	padding right	試してみる
.py-# / py-*-#	padding top と bottom	試してみる
.px-# / px-*-#	padding left と right	試してみる

その他の拡張