Bootstrap (Parte 12): Badges y Labels

Redes sociales

Los badges (insignias) se emplean para destacar el número de elementos nuevos, número de mensajes que no han sido leídos…; mientras que las labels (etiquetas) se usan generalmente para añadir alguna información valiosa, como notas importantes, avisos de advertencia…

Logo Bootstrap

Badges


Los números (5, 10 y 2) son los badges.

Utiliza la clase Bootstrap .badge dentro del elemento <span> para crear badges.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Bootstrap - Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <a href="#">Novedades <span class="badge">5</span></a>
  <a href="#">Comentarios <span class="badge">10</span></a>
  <a href="#">Actualizaciones <span class="badge">2</span></a>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



También puedes utilizar badges en el interior de de otros elementos, como po ejemplo, botones.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Bootstrap - Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <button type="button" class="btn btn-primary">Principal <span class="badge">7</span></button>
  <button type="button" class="btn btn-success">Suceso <span class="badge">3</span></button>
  <button type="button" class="btn btn-danger">Peligro <span class="badge">5</span></button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Labels (etiquetas)

Con Bootstrap, puedes utilizar labels para añadir información adicional sobre algo.

Utiliza la clase Bootstrap .label, seguida de una de estas seis clases conceptuales: .label-default, .label-primary, .label-success, .label-info, .label-warning o .label-danger, dentro del elemento <span>.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Bootstrap - Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
   <h1>Ejemplo <span class="label label-default">Defecto</span></h1>
   <h2>Ejemplo <span class="label label-primary">Principal</span></h2>
   <h3>Ejemplo <span class="label label-success">Suceso</span></h3>
   <h4>Ejemplo <span class="label label-info">Info</span></h4>
   <h5>Ejemplo <span class="label label-warning">Aviso</span></h5>
   <h6>Ejemplo <span class="label label-danger">Peligro</span></h6>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



 

Redes sociales

1 Comentario

  1. Pingback: Bootstrap (Parte 15): Listas de elementos - Webdisenia

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.