Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Bootstrap 4

Cómo construir rápidamente diseños adaptables con las utilidades Flexbox de Bootstrap 4

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by steven (you can also view the original English article)

En este tutorial, te mostraré cómo construir rápidamente diseños adaptables con las utilidades Flexbox de Bootstrap 4. Para comprender mejor estas utilidades, examinaremos cuatro ejemplos diferentes.

Nota: este tutorial asume que estás familiarizado con Bootstrap 4 y con Flexbox. Echa un vistazo a estos cursos para avanzar en la dirección correcta.


Presentamos los puntos de interrupción adaptables de Bootstrap 4

Antes de ver nuestros ejemplos, echemos un vistazo a las media queries de Bootstrap. El framework define cinco puntos de interrupción basados en píxeles para columnas de cuadrícula, que se muestran en la siguiente tabla:

Pantalla Tamaño de la ventana gráfica Prefijo de clase
Extra Pequeño < 576px
.col-*
Pequeño ≥ 576px
.col-sm-*
Medio ≥ 768px
.col-md-*
Grande ≥ 992px
.col-lg-*
Extra grande ≥ 1200px
.col-xl-*


Ejemplo #1

¡Manos a la obra! En el primer ejemplo, nuestro objetivo es centrar horizontal y verticalmente el contenido dentro de una sección, así:

The desired layout

1. El marcado

Aquí está nuestro HTML:

Ten en cuenta que hemos utilizado varias clases relacionadas con Flexbox de Bootstrap. Por ejemplo, denotamos que el elemento section es un contenedor flexible dándole la clase d-flex. Además, para centrar el contenido del elemento .row (que por defecto es un contenedor flexible) en ambas direcciones, utilizamos las clases align-items-center y justify-content-center.

2. El CSS

Aquí está el CSS asociado:

Y la demostración en Codepen:

Ejemplo #2

En el segundo ejemplo, nuestro objetivo es construir el siguiente diseño con bloques que contengan texto alineado en la parte inferior y superior de cada uno.

The desired layout on large screens

Este es el diseño deseado para pantallas grandes (cuando el ancho de la vista ≥ 1200px). Consulta la demostración y cambia el tamaño de la ventana del navegador para ver cómo cambia el diseño en tamaños de pantalla más estrechos.

1. El HTML

Comenzamos con este típico marcado de Bootstrap:

Inicialmente nos centraremos en el marcado que establece el diseño para el contenido de las columnas. Dentro de cada una de nuestras columnas, agregamos el siguiente marcado:

Nuevamente, en el código anterior, hemos utilizado una serie de clases relacionadas con Flexbox integradas de Bootstrap:

  • d-flex: para crear un contenedor flexible, transformando elementos hijos directos en elementos flexibles
  • flex-column: para establecer una dirección vertical
  • align-items-end: para alinear elementos flexibles al final del eje x (en este caso debido a la dirección de la columna)
  • justify-content-between: para justificar los elementos con el mismo espacio entre ellos.

2. El CSS

El CSS necesario para nuestro diseño:

La demostración en Codepen:

Bono

Solo para practicar, tomemos un minuto y pensemos en dos formas alternativas de flexbox para lograr el mismo diseño para el contenido de las columnas.

Primero, eliminamos la clase justify-content-between del enlace y agregamos la clase mb-auto al elemento con la clase .label. Alternativamente, podríamos haber modificado el elemento .description dándole la clase mt-auto.

El HTML actualizado:

Ahora, revisemos nuevamente la demostración:

El resultado se ve igual, ¿verdad?

Para un segundo intento, podríamos reemplazar algunas líneas de nuestro marcado con este nuevo código:

En este punto, verificamos la demostración actualizada:

¡Una vez más, el diseño generado es exactamente lo que queremos!

Ejemplo #3

En el tercer ejemplo, comenzaremos con un diseño similar al ejemplo anterior. Nuestro objetivo esta vez es manipular el orden de las columnas tercera y cuarta según el tamaño de la ventana gráfica.

Cuando la ventana gráfica tiene al menos 1200px de ancho, el orden de las columnas debe ser el siguiente:

The desired columns order on large screens

En cualquier otro caso, el orden de las columnas cambia; el tercer elemento debe venir después del cuarto:

The desired columns order layout on small and medium screens

1. El HTML

El marcado que define el diseño de la cuadrícula:

Observa las clases order-* que aparecen en las columnas tercera, cuarta y quinta.

Ten en cuenta que incluso si queremos cambiar el orden de la tercera y cuarta columna, también tenemos que especificar el orden de la quinta columna. Si no hacemos esto, la última columna siempre seguirá a la segunda.

Dentro de cada una de las columnas, centramos el contenido en ambas direcciones con las siguientes clases de utilidad familiares:

2. El CSS

Aquí está el CSS asociado:

Y, por supuesto, la demostración de Codepen:

Ejemplo #4

En el último ejemplo, nuestro objetivo es construir un encabezado adaptable.

Cuando la ventana del navegador tiene al menos 768px de ancho, el encabezado debería verse así:

The header layout on medium screens and above

En pantallas más pequeñas, su diseño cambia de la siguiente manera:

The closed state of the header menu on small screens

Para ver el menú, hacemos clic en el botón ubicado en la esquina derecha.

The opened state of the header menu on small screens

1. El HTML

Nuestro HTML se ve así:

En este caso, usamos una combinación de clases personalizadas junto con las clases de Bootstrap.

Gracias a la clase ml-auto, movemos la segunda lista a la esquina derecha del contenedor principal.

2. El CSS

A continuación se muestra una parte del CSS requerido:

3. El JavaScript

Aquí está el JavaScript responsable de alternar la visibilidad del menú móvil:

Y la demo final:

Conclusión

En este tutorial en profundidad, cubrimos cuatro ejemplos del mundo real que aprovechan las utilidades flexibles de Bootstrap 4. Espero que hayas disfrutado lo que construimos aquí y que te hayan motivado a aplicar lo que has aprendido en tus próximos proyectos de Bootstrap.

Como siempre, si tienes alguna pregunta, házmelo saber en los comentarios a continuación.

Enlaces útiles

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.