Bootstrap Insignias (Badges)

Este capítulo explicará las insignias de Bootstrap (Badges). Las insignias son similares a las etiquetas; la principal diferencia es que las esquinas de las insignias son más redondeadas.

Las insignias (Badges) se utilizan principalmente para resaltar elementos nuevos o no leídos. Para usar insignias, solo necesita<span class="badge">agregarlas a elementos como enlaces, navegación de Bootstrap, etc.

El siguiente ejemplo demuestra esto:

Ejemplo

Mostrar correos no leídos:

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

Pruébalo »

El resultado se muestra a continuación:

徽章（Badges）

Cuando no hay elementos nuevos o no leídos, mediante el :emptyselector de CSS, la insignia se colapsará, indicando que no hay contenido.

Ejemplo

Mostrar mensajes no leídos:

<div class="container"> <h2>Insignia</h2> <p>La clase .badge especifica la cantidad de mensajes no leídos:</p> <p><a href="#">Bandeja de entrada<span class="badge">21</span></a></p> </div>

Pruébalo »

Activar estado de navegación

Puede colocar insignias en la navegación de píldoras activa y en la navegación de lista. Activando<span class="badge">los enlaces, como se muestra en el siguiente ejemplo:

Ejemplo

<h4>Estado activo en la navegación de píldoras</h4> <ul class="nav nav-pills"> <li class="active"> <a href="#">Inicio<span class="badge">42</span> </a> </li> <li> <a href="#">Introducción</a> </li> <li> <a href="#">Mensajes<span class="badge">3</span> </a> </li> </ul> <br> <h4>Estado activo en la navegación de lista</h4> <ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span>Inicio</a> </li> <li> <a href="#">Introducción</a> </li> <li> <a href="#"> <span class="badge pull-right">3</span>Mensajes</a> </li> </ul>

Pruébalo »

El resultado se muestra a continuación:

激活导航状态
Otras extensiones