ブートストラップ |バッジとラベル

この記事では、Bootstrap バッジの使用方法を示すために、次の観点について説明します。

• 追加情報として Bootstrap Badge を使用するには?
• コンテキスト情報に Bootstrap Badge を使用するには?
• ブートストラップ バッジにカスタム スタイルを追加する方法は?
• ブートストラップ バッジにアイコンを追加するには?
• ブートストラップ バッジを別のソースにリンクする方法は?
• バッジを丸くする方法は？
• Bootstrap バッジをカウンターとして使用するには?

ブートストラップ バッジとは何ですか?

バッジは、インジケーターを表示するために使用される基本的なコンポーネントです。たとえば、通知またはメッセージの数を示す数値カウンターとして使用できます。

また、特定の画像に示すように、追加情報を表示するためにも使用できます。

追加情報として Bootstrap Badge を使用するには?

ブートストラップ バッジを HTML 要素内に追加して、追加情報として使用できます。デモンストレーションについては、以下の例をご覧ください。

例

追加情報に Bootstrap バッジを使用するには、まず次の手順を実行します。

• 追加 '

  ' と '

  要素。

• 「」を配置 <スパン> ” 要素 バッジ ' と ' バッジ-* ' クラス。 「badge-*」クラスは、指定された色のバッジを参照します。

関連する見出しに 2 つのバッジが追加されていることがわかります。

コンテキスト情報に Bootstrap Badge を使用するには?

ブートストラップ バッジは、「 バッジ危険 」はバッジを赤色で表示し、キャンセル、無効などの失敗したメッセージを表示するために使用できます。 「 バッジ成功 」は、成功メッセージを表示したい場合に使用されます。

例

説明したシナリオを理解するには、指定されたコードを見てください。

出力

ブートストラップ バッジにカスタム スタイルを追加する方法は?

CSS を使用して、独自のスタイルを Bootstrap バッジに追加することもできます。理解を深めるために、「」という名前のクラス 習慣 」が「」内に追加されます。 <スパン> ' エレメント。次に、次のプロパティが適用されます。

スタイル「カスタム」クラス

「 。習慣 」は、「 習慣 ' クラス。次のプロパティが適用されます。

• 「 フォントサイズ 」はフォントサイズを調整します。
• 「 フォントの太さ 」は文字の太さを表しています。
• 「 文字間隔 」は、文字間にスペースを追加します。
• 「 パディング 」は、要素のコンテンツの周りにスペースを提供します。

出力

ブートストラップ バッジにアイコンを追加するには?

バッジにさまざまなアイコンを追加することもできます。そのために、この目的のために利用できるいくつかのクラスがあります。詳細については、 素晴らしいフォント Webサイト。

例

HTML で、「 <スパン> ' エレメント。この要素内に、インライン要素「 」または「」を配置して、アイコン クラスを挿入します。