Bootstrap バッジ
この記事では、Bootstrap のバッジコンポーネントの使い方について説明します。基本的な使い方、スタイルと色の変更、配置と位置調整、ボタンやナビゲーションコンポーネントとの組み合わせについて解説します。
一、基礎知識
1. バッジとは
バッジは、ボタン、ラベル、またはその他の要素にカウントやステータスマークを追加するために使用されます。
2. 使用方法
<span class="badge bg-*">...</span> を使用します。ここで、* は異なるスタイルまたは色を表します。
二、スタイルと色
1. 背景色
bg-primary、bg-secondary、bg-success など、さまざまな背景色オプションが用意されています。
| クラス | 色 |
|---|---|
bg-primary |
青 |
bg-secondary |
灰色 |
bg-success |
緑 |
bg-danger |
赤 |
bg-warning |
黄色 |
bg-info |
水色 |
bg-light |
薄い灰色 |
bg-dark |
濃い灰色 |
2. ピルスタイル
.rounded-pill クラスを使用すると、ピル型のバッジを作成できます。
<span class="badge rounded-pill bg-primary">ピルバッジ</span>
三、配置と位置調整
1. 相対配置
デフォルトでは、バッジは親要素に対して相対的に配置されます。
2. ユーティリティクラスの使用
.position-absolute、.top-0、.start-100 などのユーティリティクラスを使用して、バッジの位置を制御できます。詳細については、Bootstrap の公式ドキュメントを参照してください。
四、他のコンポーネントとの組み合わせ
1. ボタン
ボタン内にバッジを配置すると、カウントやステータスマークが付いたボタンを作成できます。
<button type="button" class="btn btn-primary">
メッセージ <span class="badge bg-secondary">4</span>
</button>
2. ナビゲーション
ナビゲーションリンクにバッジを追加すると、新しいメッセージや通知を強調表示できます。
<a class="nav-link" href="#">
通知 <span class="badge bg-danger">新着</span>
</a>
よくある質問
1. バッジの色をカスタマイズするにはどうすればよいですか？
独自のCSSクラスを作成し、background-color プロパティを使用してバッジの背景色を定義できます。その後、そのクラスをバッジ要素に追加します。
2. バッジのテキストの色を変更するにはどうすればよいですか？
.text-* ユーティリティクラスを使用して、バッジのテキストの色を変更できます。たとえば、白いテキストのバッジを作成するには、class="badge bg-primary text-white" を使用します。
3. バッジを非表示にするにはどうすればよいですか？
.d-none ユーティリティクラスを使用して、バッジを非表示にすることができます。たとえば、class="badge bg-primary d-none" とすると、バッジは非表示になります。