Bootstrap: jumbotron, botones y alertas

Voy a seguir con el repaso a Boostrap tocando puntos tan importante para el diseño de una web como el desarrollo de una cabecera con Jumbotron, menús, botones y alertas.

JUMBOTRON

El Jumbotron es una clase que nos facilita a la hora de crear bloques con un fondo diferente, pensados para llamar la atención y muy útiles para crear cabeceras o separar contenido dentro de una estructura. Para ello basta con añadir la etiqueta jumbotron  y si queremos que el texto dentro del bloque ocupe el 100% añadimos jumbotron-fluid, además quita el redondeado de la clase jumbotron.

<div class="jumbotron jumbotron-fluid">
<h1>TITULAR</h1>
<p>esto es un ejemplo de un jumbotron.</p>
</div>

ALERTAS Y BOTONES

Con Bootstrap es muy sencillo crear los típicos mensajes de aviso. Tenemos las siguientes clases preparadas para ello: .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light y .alert-dark.

<div class="container"> <p class="alert alert-success alert-dismissable fade show"> <a class="close" datadismiss="alert">&times;</a>esto es un ejemplo de <a class="alert-link">alert-success</a>. </p> <p class="alert alert-info">esto es un ejemplo de <a class="alert-link">alert-info</a>.</p> <p class="alert alert-warning">esto es un ejemplo de <a class="alert-link">alert-warning</a>.</p> <p class="alert alert-danger">esto es un ejemplo de <a class="alert-link">alert-danger</a>.</p> <p class="alert alert-primary">esto es un ejemplo de <a class="alert-link">alert-primary</a>.</p> <p class="alert alert-secondary">esto es un ejemplo de <a class="alert-link">alert-secondary</a>.</p> <p class="alert alert-light">esto es un ejemplo de <a class="alert-link">alert-light</a>.</p> <p class="alert alert-dark">esto es un ejemplo de <a class="alert-link">alert-dark</a>.</p> </div>

Con alert-link damos formato a los enlaces dentro de las alertas. Y si queremos que se puedan cerrar podemos añadir un enlace con la clase close y la palabra clave ×, de esta forma se añade un icono X en un lado de la alerta. Y para que de verdad se cierre tenemos que añadir al enlace datadismiss=»alert» y a la clase de la alerta alert-dismissable fade show. Para los botones lo único que cambia es el inicio de las clases: .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-primary, .btn-secondary, .btn-light y .btn-dark. Estos crean botones con relleno si preferimos botones solo con borde y fondo blanco: .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-primary, .btn-secondary, .btn-light y .btn-dark

<button type="button" class="btn">Basic</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button> <button type="button" class="btn btn-outline-primary btn-lg">Primary</button> <button type="button" class="btn btn-outline-secondary btn-lg">Secondary</button> <button type="button" class="btn btn-outline-success btn-sm">Success</button> <button type="button" class="btn btn-outline-info btn-sm">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-link">Link</button>

Si queremos botones más pequeños o más grandes añadimos las clases: btn-lg o btn-sm.  Si queremos mostrarlos agrupados podemos usar la etiqueta (btn-group):

<div class="btn-group"> <button type="button" class="btn btn-primary">Botón 1</button> <button type="button" class="btn btn-primary">Botón 2  <span class="badge badge-light">2</span> </button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Botón 3</button>  <div class="dropdown-menu"> <a class="dropdown-item" href="#">Botón 3.1</a> <a class="dropdown-item" href="#">Botón 3.2</a> </div> </div>

Y si los queremos agrupados pero en vertical usaremos btn-group-vertical. Si revisamos el ejemplo vemos que del 3er menú, al pinchar en él, surge otro. Eso es por las etiquetas: dropdown-toggle y dropdown-menu, y data-toggle=»dropdown». Para añadir número de mensajes, por ejemplo usamos: badge badge-light (pudiendo cambiar light, por warning, primary, etc).

BARRAS DE PROGRESO, MIGAS DE PAN Y PAGINACIÓN

Para añadir barras de progreso vale con 2 divs y las clases: progress + progress-bar progress-bar-striped.

<div class="progress"> <div class="progress-bar progress-bar-striped" style="width:40%"></div> </div>

Para la paginación usamos las clases: pagination + page-item.

<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Anterior</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Siguiente</a></li> </ul>

También es muy sencillo crear migas de pan con las clases: breadcrumb y breadcrumb-item.

<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">miga 1</a></li> <li class="breadcrumb-item active"><a href="#">miga 2</a></li> </ul>

CONTENIDO DESPLEGABLE: ACORDEÓN

Otro recurso gráfico muy sencillo de usar con Bootstrap y muy efectivo son los contenidos desplegables o acordeón.

<div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#acordeon1">  Acordeón 1 </a> </div> <div id="acordeon1" class="collapse show"> <div class="card-body"> Prueba 1... </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" dataparent="#accordion" href="#acordeon2">   Acordeón 2 </a> </div> <div id="acordeon2" class="collapse"> <div class="card-body">  Prueba 2... </div> </div> </div> </div>

En este ejemplo vemos que todo está dentro de una clase accordion, luego tenemos 2 contenidos que son card y que nos permite y el enlace: data-toggle=»collapse» data-parent=»#accordion» href=»#acordeon1″. De este grupo de atributos el que relaciona el enlace con el contenido es href y por eso tiene que enlazar se con el bloque del contenido: id=»acordeon1″. Este contenido también tiene que tener la clase class=»collapse» y si le añadimos show, ese contenido se muestra desplegado por defecto.

MENÚS NAVEGACIÓN

Ahora vamos a crear un menú de navegación con las clases: nav y nav-item.

<ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Menú 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menú 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menú 3</a> </li> </ul>

SLIDERS

Para terminar el repaso a Bootstrap vamos a mirar cómo podemos crear con muy poco html un slider.

<div id="prueba" class="carousel slide" data-ride="carousel"> <!-- INDICADORES PIE --> <ul class="carousel-indicators"> <li data-target="#prueba" data-slide-to="0" class="active"></li> <li data-target="#prueba" data-slide-to="1"></li> <li data-target="#prueba" data-slide-to="2"></li> </ul> <!-- DIAPOSITIVAS --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="2.jpg" alt="1"> </div> <div class="carousel-item"> <img src="1.jpg" alt="1"> </div> <div class="carousel-item"> <img src="3.png" alt="1"> </div> </div> <!-- FLECHAS --> <a class="carousel-control-prev" href="#prueba" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#prueba" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div>

Con unas pocas etiquetas podemos crear el slider y sus complementos como son las flechas y los iconos del pie de imagen y que sirven para navegar entre las diapositivas.