BOOTSTRAP COMPONENTES - ELEMENTOS ESPECIALES DE TEXTO

En esta sesión detallamos el uso de componentes para destacar elementos de texto: las etiquetas, insignias y alertas, con ejemplos prácticos.

Cargando video...

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

Las etiquetas, insignias y alertas son elementos de texto, y pueden agregarse también clases contextuales (éxito, advertencia, información, etc)

En las "insignias" es común incluir información numérica (como mensajes sin leer) y se adaptan según el estilo del elemento que las contiene.

Dentro de las alertas, se pueden incluir también enlaces con clases que brindan un estilo compatible.


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Las 3 etiquetas anteriores deben ir en primer lugar en el bloque head -->
<title>Etiquetas, insignias y alertas con Bootstrap</title>
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- HTML5 shim y Respond.js se agregan para mejorar soporte a IE8 -->
<!-- NOTA: Respond.js no funciona si se ve la página localmente con file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* clase local para visualizar mejor bloques de ejemplo */
.bs-example {
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
margin-bottom: 15px;
}
</style>
</head>
<body>
<!-- podemos usar la clase "container" (ancho fijo) o "container-fluid" (ancho completo) -->
<div class="container">
<h1>Etiquetas, insignias y alertas con Bootstrap</h1>
<div class="bs-example">
<h2>Etiquetas (clase "label") en diferentes tamaños y contextos</h2>
<div class="bs-example">
<h1>Encabezado nivel 1 <span class="label label-default">Etiqueta</span></h1>
<h2>Encabezado nivel 2 <span class="label label-default">Etiqueta</span></h2>
<h3>Encabezado nivel 3 <span class="label label-default">Etiqueta</span></h3>
<h4>Encabezado nivel 4 <span class="label label-default">Etiqueta</span></h4>
<h5>Encabezado nivel 5 <span class="label label-default">Etiqueta</span></h5>
<h6>Encabezado nivel 6 <span class="label label-default">Etiqueta</span></h6>
<span class="label label-default">Predeterminada (label-default)</span>
<span class="label label-primary">Principal (label-primary)</span>
<span class="label label-success">Éxito (label-success)</span>
<span class="label label-info">Información (label-info)</span>
<span class="label label-warning">Advertencia (label-warning)</span>
<span class="label label-danger">Peligro (label-danger)</span>
</div>
</div>
<div class="bs-example">
<h2>Insignias (clase "badge")</h2>
<p>Insignia en enlace:</p>
<a href="#">Bandeja de Entrada <span class="badge">42</span></a>
<hr>
<p>Insignia en botón:</p>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
<hr>
<p>Insignia en navegación (píldoras):</p>
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Inicio <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Mi Perfil</a></li>
<li role="presentation"><a href="#">Mensajes <span class="badge">3</span></a></li>
</ul>
</div>
<div class="bs-example">
<h2>Alertas (clase "alert")</h2>
<!-- agregamos el role="alert" para mejorar la accesibilidad -->
<div class="alert alert-success" role="alert">
<strong>¡Éxito!</strong> Mensaje de alerta exitosa (alert-success)
</div>
<div class="alert alert-info" role="alert">
<strong>¡Atención!</strong> Mensaje de alerta informativo (alert-info)
</div>
<div class="alert alert-warning" role="alert">
<strong>¡Advertencia!</strong> Mensaje de alerta con advertencia (alert-warning)
</div>
<div class="alert alert-danger" role="alert">
<strong>¡Peligro!</strong> Mensaje de alerta con peligro o error (alert-danger)
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">
<span aria-hidden="true">&times;</span>
</button>
<strong>¡Atención!</strong> Los mensajes de alerta pueden contener
<a href="#" class="alert-link">enlaces</a> y un botón de cierre, como éste
</div>
</div>
</div>
<!-- jQuery (necesario para utilizar plugins JS de Bootstrap) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Acá utilizamos la versión precompilada y optimizada,
pero pueden incluirse otras versiones o componentes individuales -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Rating

Global

Ver video en playlist

comments powered by Disqus

Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.