Latest web development tutorials

Bootstrap Abzeichen

In diesem Kapitel werden Bootstrap Abzeichen (Badges) erklären. Abzeichen und Tags ähnlich, ist der wesentliche Unterschied, dass das Abzeichen mehr abgerundeten Ecken.

Abzeichen (Badges) ist vor allem für neue oder noch ungelesene Elemente verwendet markiert. Um das Abzeichen zu verwenden, nur setzen<span class = "Abzeichen"> hinzugefügt , um den Link, Bootstrap Navigation usw. Diese Elemente werden können.

Das folgende Beispiel veranschaulicht diesen Punkt:

Beispiele

Ungelesene Nachrichten:

<A href = "#"> Mailbox < Spanne class = "Abzeichen"> 50 < / span> </ a>

Versuchen »

Die Ergebnisse sind wie folgt:

Badges (Abzeichen)

Wenn es keine neuen oder ungelesenen Elemente ist, durch dieCSS: leer Selektor wird Abzeichen gefaltet werden, zeigt das Innere leer.

Beispiele

Anzeige ungelesener verschwinden:

<Div class = "container"> <H2> Abzeichen </ h2> <P> .badge Klasse gibt die Anzahl der ungelesenen Nachrichten: </ p> <P> <a href = "#"> Eingang <span class = "Abzeichen"> 21 < / span> </ a> </ p> </ Div>

Versuchen »

Aktiviert Navigationsstatus

Sie können ein Abzeichen in einem aktiven Zustand Kapsel Navigation und Liste Navigation platzieren. Durch die Verwendung der<span class = "Abzeichen"> den Link zu aktivieren, wie im folgenden Beispiel gezeigt:

Beispiele

<H4> Kapsel Navigation aktiv </ h4> <Ul class = "nav nav-Pillen" > <Li class = "aktiv"> <A href = "#"> Startseite <span class = "Abzeichen"> 42 < / span> </ A> </ Li> <Li> <A href = "#"> Einführung </ a> </ Li> <Li> <A href = "#"> news <span class = "Abzeichen"> 3 < / span> </ A> </ Li> </ Ul> <Br> <H4> Liste der aktiven Navigation </ h4> <Ul class = "nav nav-Pillen nav -stacked" style = "max-width: 260px ;"> <Li class = "aktiv"> <A href = "#"> <span class = "Abzeichen Pull-right" > 42 </ span> Home </ a> </ Li> <Li> <A href = "#"> Einführung </ a> </ Li> <Li> <A href = "#"> <span class = "Abzeichen Pull-right" > 3 </ span> Nachrichten </ a> </ Li> </ Ul>

Versuchen »

Die Ergebnisse sind wie folgt:

Aktiviert Navigationsstatus