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…
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
Pingback: Bootstrap (Parte 15): Listas de elementos - Webdisenia