Bootstrap-badges
提供:Dev Guides
ブートストラップ-バッジ
この章では、Bootstrapバッジについて説明します。 バッジはラベルに似ています。主な違いは、角が丸くなっていることです。
バッジは、主に新規または未読のアイテムを強調するために使用されます。 バッジを使用するには、リンク、ブートストラップnavなどに <span class = "badge"> を追加するだけです。
次の例はこれを示しています-
<a href = "#">Mailbox <span class = "badge">50</span></a>
新しいアイテムまたは未読のアイテムがない場合、コンテンツが存在しない場合、バッジはCSSの*:empty *セレクターを介して単純に折りたたみます。
アクティブなナビゲーション状態
錠剤とリストナビゲーションのアクティブな状態にバッジを配置できます。 次の例に示すように、アクティブなリンクに <span class = "badge"> を配置することでこれを実現できます-
<h4>Example for Active State in Pill </h4>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home <span class ="badge">42</span></a></li>
<li><a href = "#">Profile</a></li>
<li><a href = "#">Messages <span class = "badge">3</span></a></li>
</ul>
<br>
<h4>Example for Active State in navigations</h4>
<ul class = "nav nav-pills nav-stacked" style = "max-width: 260px;">
<li class = "active">
<a href = "#">
<span class = "badge pull-right">42</span>
Home
</a>
</li>
<li><a href = "#">Profile</a></li>
<li>
<a href = "#">
<span class = "badge pull-right">3</span>
Messages
</a>
</li>
</ul>