Bootstrap Badges

Dieses Kapitel erklärt Bootstrap-Badges. Badges ähneln Labels, wobei der Hauptunterschied darin besteht, dass Badges stärker abgerundete Ecken haben.

Badges werden hauptsächlich verwendet, um neue oder ungelesene Elemente hervorzuheben. Um ein Badge zu verwenden, fügen Sie einfach<span class="badge">sie zu Links, Bootstrap-Navigation und ähnlichen Elementen hinzu.

Das folgende Beispiel demonstriert dies:

Beispiel

Ungelesene E-Mails anzeigen:

<a href="#">Postfach <span class="badge">50</span></a>

Ausprobieren »

Das Ergebnis wird unten angezeigt:

徽章（Badges）

Wenn keine neuen oder ungelesenen Elemente vorhanden sind, kollabiert das Badge über den CSS :empty-Selektor, was anzeigt, dass sich kein Inhalt darin befindet.

Beispiel

Ungelesene Nachrichten anzeigen:

<div class="container"> <h2>Badge</h2> <p>Die .badge-Klasse gibt die Anzahl der ungelesenen Nachrichten an:</p> <p><a href="#">Posteingang<span class="badge">21</span></a></p> </div>

Ausprobieren »

Navigationszustände aktivieren

Sie können Badges in aktiver Pillen-Navigation und Listen-Navigation platzieren. Indem Sie<span class="badge">verwenden, um den Link zu aktivieren, wie im folgenden Beispiel gezeigt:

Beispiel

<h4>Aktiver Zustand in der Pillen-Navigation</h4> <ul class="nav nav-pills"> <li class="active"> <a href="#">Startseite<span class="badge">42</span> </a> </li> <li> <a href="#">Profil</a> </li> <li> <a href="#">Nachrichten<span class="badge">3</span> </a> </li> </ul> <br> <h4>Aktiver Zustand in der Listen-Navigation</h4> <ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span>Startseite</a> </li> <li> <a href="#">Profil</a> </li> <li> <a href="#"> <span class="badge pull-right">3</span>Nachrichten</a> </li> </ul>

Ausprobieren »

Das Ergebnis wird unten angezeigt:

激活导航状态
Andere Erweiterungen