Bootstrap4 バッジ（Badges）

この記事では、Bootstrap4 の徽章（Badges）コンポーネントの使い方について解説します。徽章の定義、種類、適用シーン、およびコードを使用してさまざまなスタイルの徽章を作成する方法について説明します。

---

一、 徽章とは？

徽章は、ボタン、ラベルなどの要素に追加情報を表示するための小さな要素です。未読メッセージの数、新機能のリマインダーなどを表示するために使用されます。

二、 徽章の種類

1. デフォルト徽章:

   .badge クラスを使用して作成します。例：<span class="badge badge-primary">主要</span>

2. リンク徽章:

   徽章を <a> タグで囲むことで、クリック可能になります。例：<a href="#" class="badge badge-success">成功</a>

3. テーマカラー:

   Bootstrap は、.badge-primary、.badge-secondary、.badge-success など、さまざまな定義済みカラークラスを提供しています。

三、 適用シーン

1. 新しいコンテンツのマーク:

   例：通知アイコンに未読メッセージの数を表示する。

2. 重要な情報の強調表示:

   例：ボタンに「新機能」徽章を追加する。

3. 分類ラベル:

   例：異なる色の徽章を使用して、異なる種類のラベルを区別する。

四、 コード例

1. デフォルト徽章の作成:

   
   <span class="badge badge-primary">主要</span>
   <span class="badge badge-secondary">次要</span>
           

2. リンク徽章の作成:

   
   <a href="#" class="badge badge-success">成功</a>
   <a href="#" class="badge badge-danger">危険</a>
           

3. 徽章の色をカスタマイズする:

   
   <span class="badge badge-pill badge-light text-dark">カスタム</span>
           

五、 その他の使用方法

• 丸薬型の徽章:

  .badge-pill クラスを使用すると、丸薬型の徽章を作成できます。

• 色とスタイルのカスタマイズ:

  カスタムCSSクラスを使用して、徽章の色、背景色、境界線などのスタイルを変更できます。

よくある質問

1. Bootstrap4で利用できる徽章の色の種類は？

   Bootstrap4では、primary、secondary、success、danger、warning、info、light、darkの8種類の色の徽章が用意されています。

2. 丸い徽章ではなく、四角い徽章を表示するには？

   デフォルトでは、Bootstrap4の徽章は角丸になっていますが、.badge-pillクラスを削除することで四角い徽章を表示できます。

3. 徽章のサイズを変更するには？

   Bootstrap4では、徽章のサイズを変更するための組み込みのクラスは提供されていません。ただし、カスタムCSSを使用して徽章のフォントサイズやパディングを調整することで、サイズを変更することができます。

---