Latest web development tutorials

insigne Bootstrap

Ce chapitre explique badges Bootstrap (Insignes). Badges et étiquettes similaires, la principale différence est que le badge coins plus arrondis.

Insignes (Insignes) est principalement utilisé pour des éléments nouveaux ou non lus en surbrillance. Pour utiliser le badge, il suffit de mettre<span class = "badge"> ajouté au lien, navigation Bootstrap, etc. Ces éléments peuvent être.

L'exemple suivant illustre ce point:

Exemples

Afficher les messages non lus:

<A href = "#"> Mailbox < durée class = "badge"> 50 < / span> </ a>

Essayez »

Les résultats sont les suivants:

Insignes (Badges)

Quand il n'y a pas d' éléments nouveaux ou non lus, par le biais duCSS: vide sélecteur, badges seront pliées, montrant l'intérieur vide.

Exemples

Afficher disparaître non lu:

<Div class = "container"> <H2> insigne </ h2> <P> classe .badge spécifie le nombre de messages non lus: </ p> <P> <a href = "#"> Boîte de réception <span class = "badge"> 21 < / span> </ a> </ p> </ Div>

Essayez »

état de la navigation Activé

Vous pouvez placer un badge dans une navigation capsule d'état et la liste de navigation active. En utilisant le<span class = "badge"> pour activer le lien, comme le montre l'exemple suivant:

Exemples

<H4> navigation capsule actif </ h4> <Ul class = "nav nav-pilules» > <Li class = "active"> <A href = "#"> Accueil <span class = "badge"> 42 < / span> </ A> </ Li> <Li> <A href = "#"> Introduction </ a> </ Li> <Li> <A href = "#"> nouvelles <span class = "badge"> 3 < / span> </ A> </ Li> </ Ul> <Br> <H4> Liste de navigation active </ h4> <Ul class = "nav nav-pilules nav -stacked" style = "max-width: 260px ;"> <Li class = "active"> <A href = "#"> <Span class = "badge pull-right" > 42 </ span> Accueil </ a> </ Li> <Li> <A href = "#"> Introduction </ a> </ Li> <Li> <A href = "#"> <Span class = "badge pull-right" > 3 </ span> nouvelles </ a> </ Li> </ Ul>

Essayez »

Les résultats sont les suivants:

état de la navigation Activé