Bootstrap: jumbotron, botones y alertas

Home » Blog » 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 &times;, 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.

 

Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

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

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas

Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.

erlantz rique
erlantz rique
19/02/2024

Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.

Jose Marlasca
Jose Marlasca
06/02/2024

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/2024

Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.

Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024

Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%

Asier Hermoso
Asier Hermoso
03/01/2024

Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita 😉
Un crack!!

itxaso zubia
itxaso zubia
15/12/2023

El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.

Fernando Cózar
Fernando Cózar
02/11/2023