まず、Bootstrap 3では、バッジにさまざまな色を適用することができます。以下に、いくつかの一般的な色の例を示します。
-
デフォルトのバッジ:
<span class="badge">デフォルト</span> -
成功のバッジ:
<span class="badge badge-success">成功</span> -
ワーニングのバッジ:
<span class="badge badge-warning">ワーニング</span> -
危険のバッジ:
<span class="badge badge-danger">危険</span>
これらのクラスを使用することで、異なる色のバッジを作成することができます。また、カスタムの色を適用する場合は、CSSを使用してスタイルを追加することもできます。
さらに、バッジの色を変更するために、背景色とテキスト色を個別に指定することもできます。以下に例を示します。
<span class="badge" style="background-color: blue; color: white;">カスタム</span>上記の例では、背景色を青、テキスト色を白に設定しています。
以上が、Bootstrap 3でバッジの色を設定する方法です。色の変更やカスタマイズにより、デザインに適したバッジを作成することができます。是非試してみてください！