ブートストラップ-バッジ

この章では、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>

Bootstrap-badges

ブートストラップ-バッジ

アクティブなナビゲーション状態