Los badges se emplean para destacar elementos nuevos o que no han sido leídos. Añade badges a los enlaces, los elementos de navegación de Bootstrap y muchos otros tipos de elementos mediante la etiqueta <span class="badge">. Ejemplo:
<a href="#">Bandeja de entrada <span class="badge">42</span></a>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.43 Badges en Bootstrap 3
Lo mejor de los badges es que se ocultan automáticamente cuando no hay elementos nuevos o sin leer, gracias al selector :empty de CSS. Este comportamiento no está disponible en Internet Explorer 8 porque ese navegador no soporta el selector :empty.
Por otra parte, los badges disponen por defecto de los estilos adecuados para verse bien cuando se incluyen dentro del enlace seleccionado de un elemento de navegación: Ejemplo:
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
Inicio
</a>
</li>
...
</ul>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.44 Badges que se adaptan en Bootstrap 3