ブートストラップ ユーティリティは、カスタム CSS を記述する必要がなく、Web サイトのスタイル設定を簡単かつ迅速に行うための強力なクラスのセットです。基本を見てみましょう!

ブートストラップ ユーティリティとは何ですか?
ブートストラップ ユーティリティは、HTML 要素に直接適用して外観や動作を制御できる事前定義された CSS クラスです。これらのユーティリティは、間隔、配置、テキストなどに便利です。独自の CSS を記述する代わりに、これらのクラスを使用して要素をすばやくスタイル設定できます。

一般的なブートストラップ ユーティリティ
最も一般的に使用されるブートストラップ ユーティリティのいくつかを次に示します:

間隔 (マージンとパディング)

m クラスと p クラスは、それぞれマージンとパディングを制御します。
例: mt-3 は上部にマージンを追加し、mb-4 は下部にマージンを追加し、p-2 は周囲にパディングを追加します。

テキストの配置

テキストを位置揃えするには、text-left、text-center、text-right などのクラスを使用します。

画面

d- クラスは、d-none (要素を非表示にする) や d-block (ブロックレベルの要素にする) など、要素の表示プロパティを制御します。

フレックスボックス

Bootstrap の d-flex クラスは要素を flex コンテナに変換し、他の flex ユーティリティを使用してレイアウトを制御できます。
例:

色

bg- クラスと text- クラスは、背景とテキストの色を適用します。

ボーダー

要素に境界線を追加または削除するには、境界線ユーティリティを使用します。

ブートストラップ ユーティリティを使用する理由

速度: 一般的なタスクにカスタム CSS を記述する必要がないため、時間を節約できます。
一貫性: ウェブサイト全体で一貫したスタイルを維持するのに役立ちます。
レスポンシブ デザイン: 多くのユーティリティはレスポンシブです。つまり、画面サイズに基づいて自動的に調整されます。

最後のヒント:

ユーティリティの結合: 1 つの要素で複数のユーティリティを組み合わせて、目的のスタイルを実現できます。
ドキュメントを確認してください: Bootstrap のドキュメントはあなたの親友です。各ユーティリティの詳細な例と説明が含まれています。

それでおしまい！ Bootstrap ユーティリティを使用すると、CSS を深く掘り下げることなく、Web サイトのスタイルをすばやく設定できます。慣れてくると、これらのユーティリティがレスポンシブでスタイリッシュな Web サイトを構築するのに非常に強力であることがわかるでしょう。コーディングを楽しんでください!