Ver índice de contenidos del libro

6.11. Badges

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:

Badges en Bootstrap 3

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:

Badges que se adaptan en Bootstrap 3

Figura 6.44 Badges que se adaptan en Bootstrap 3