各タグのクラスの規則性みたいなのはあるの？

2024年6月8日

Bootstrapは、クラスに一定の命名規則を持っており、これにより異なるスタイルを適用できるようになっています。以下は一般的なBootstrapのクラスの命名規則の例です。

1. テキストスタイル:

   • text-{color}: テキストの色を指定します。例: text-primary, text-danger, text-mutedなど。
   • font-weight-{weight}: テキストのフォントウェイトを指定します。例: font-weight-bold, font-weight-normalなど。

2. コンテナ:

   • container: コンテンツを中央寄せするための基本的なコンテナ。
   • container-fluid: 幅100%のフル幅のコンテナ。

3. マージンとパディング:

   • m{t|r|b|l|x|y}-{size}: マージンを指定します。例: mt-2（上側にマージン2）。
   • p{t|r|b|l|x|y}-{size}: パディングを指定します。例: py-3（上下にパディング3）。

4. フォントサイズ:

   • display-{size}: ディスプレイヘッダーのサイズを指定します。例: display-4。
   • lead: リードパラグラフのスタイル。

5. ボタン:

   • btn: 基本的なボタンスタイル。
   • btn-{style}: ボタンのスタイル（primary, danger, warningなど）。

これは一般的な例であり、Bootstrapにはこれ以外にも多くのクラスがあります。具体的なスタイルに合わせて、公式ドキュメントやBootstrapのスタイルガイドを参照してください。Bootstrapのクラスは予測可能であり、規則性がありますので、一度習得すれば効果的に利用できます。