El sistema de cuadrícula Bootstrap 4 se utiliza para diseños receptivos.
Un diseño receptivo representa la forma en que los elementos se alinean en la página en diferentes resoluciones. Es importante que comprenda cómo usar la cuadrícula antes de aprender sobre cualquier otro componente de Bootstrap 4, porque sea cual sea el elemento que use, deberá colocarlo en algún lugar de la pantalla.
¡Empecemos!
Tabla de contenido
- Bootstrap 4 contenedores
- Bootstrap 4 filas
- Bootstrap 4 columnas
- Otras lecturas
La cuadrícula Bootstrap 4 consta de contenedores, filas y columnas. Los tomaremos uno por uno y se los explicaremos.
Bootstrap 4 contenedores
Un contenedor Bootstrap 4 es un elemento de la clase .container. El contenedor es la raíz del sistema de cuadrícula Bootstrap 4 y se usa para controlar el ancho del diseño.
El contenedor Bootstrap 4 contiene todos los elementos de una página. Esto significa que su página debe tener la siguiente estructura: primero el cuerpo de la página HTML, dentro de ella debe agregar el contenedor y todos los demás elementos dentro del contenedor.
... La .containerclase simple establece el ancho del diseño en función del ancho de la pantalla. Coloca el contenido en el medio de la página alineándolo horizontalmente. Hay el mismo espacio entre el contenedor Bootstrap 4 y el borde izquierdo y derecho de la página.
El .containerancho se reduce a medida que el ancho de la pantalla se reduce y se convierte en ancho completo en dispositivos móviles. El ancho del contenedor se define dentro de la biblioteca Bootstrap 4 para cada tamaño de pantalla. Puedes ver los tamaños exactos aquí.
Un contenedor de ancho completo ocupa el 100% del tamaño de la pantalla independientemente del ancho de la pantalla. Para usarlo necesitas agregar la clase. container-fluid.
Hello! I am in a simple container. Hello! I am in a full-width container. Puede ver el CodePen aquí.
Para ver las diferencias entre los dos tipos de contenedores, puede abrir el lápiz en su consola y cambiar entre tamaños de pantalla.
Bootstrap 4 filas
Las filas de Bootstrap 4 son secciones horizontales de la pantalla. Se utilizan solo como envoltorios para columnas. Para usarlos, necesitas la .rowclase.
... Estas son las cosas más importantes que debe recordar sobre las filas de Bootstrap 4:
- Solo se utilizan para contener columnas. Si coloca otros elementos dentro de la fila junto con las columnas, no obtendrá el resultado esperado.
- Deben colocarse en contenedores. Si no lo hace, obtendrá un desplazamiento horizontal en su página. Esto sucede porque las filas tienen márgenes negativos izquierdo y derecho de 15. El contenedor tiene rellenos de 15px por lo que contrarresta los márgenes.
- Las columnas deben ser secundarias de la fila. De lo contrario, no se alinearán. Las filas y columnas se crean para trabajar juntas en esta estricta jerarquía.
Bootstrap 4 columnas
Ahora podemos llegar a la parte agradable de este tutorial, las columnas de Bootstrap 4. ¡Las columnas son geniales! Te ayudan a dividir la pantalla horizontalmente.
Si coloca una sola columna en su fila, ocupará todo el ancho. Si agrega dos columnas, cada una tomará la mitad del ancho. Y lo mismo ocurre con cualquier número de columnas.
... ... ... ... ... ... ... ... Puede ver el código en vivo en CodePen.
Nota al margen : las columnas no están coloreadas. Acabo de agregar colores para una descripción más atractiva visualmente / para que se vean bonitos.
Establecer tamaños para columnas
El uso de la .colclase establece el ancho de la columna de forma dinámica. Eso significa que, dependiendo del número de columnas en una fila, el ancho de una columna será el ancho del contenedor dividido por el número de columnas.
Pero hay otra forma de definir columnas. Puede usar clases para columnas y definir su tamaño.
De forma predeterminada, la cuadrícula Bootstrap 4 consta de 12 columnas. Puede seleccionar cualquier tamaño de 1 a 12 para su columna. Si desea 3 columnas iguales, puede usar .col-4para cada una (porque 3 * 4 columnas cada una = 12). O puede establecer diferentes tamaños para ellos. Aquí hay unos ejemplos:
... ... ... ... ... ... ... ... Puede ver el código en vivo en CodePen.
Si la suma de las columnas en su fila no llega a 12, entonces no llenan toda la fila. Si la suma de las columnas va más allá de 12, pasará a la siguiente línea. La primera línea solo mostrará los primeros elementos que sumen 12 o menos.
Establecer puntos de interrupción para columnas
Si toma el ejemplo anterior y desea mostrarlo en un dispositivo móvil, es posible que tenga algunos problemas. Mostrar cinco columnas en el móvil hará que el contenido sea ilegible.
Aquí es donde entra en juego uno de los componentes más poderosos de Bootstrap 4. Para tener diferentes diseños en diferentes pantallas, no necesitará escribir consultas de medios, en su lugar, puede usar los puntos de interrupción de la columna.
Un punto de interrupción es una variable de Bootstrap 4 que representa una resolución de pantalla. Cuando especifica un punto de interrupción para una clase, le está diciendo a la clase que esté activa solo para resoluciones que sean al menos tan grandes como el número que contiene el punto de interrupción.
La clase más simple sobre la que aprenderemos es la .col-[breakpoint]clase. Cuando usa esta clase, está definiendo el comportamiento de las columnas solo cuando se muestran en dispositivos que tienen una resolución de al menos el punto de interrupción definido. Hasta el punto de interrupción dado, sus columnas se alinearán verticalmente de forma predeterminada. Y después de su punto de interrupción, se alinearán horizontalmente debido a la clase.
Bootstrap tiene 4 puntos de interrupción que puede usar:
.col-smpara teléfonos móviles más grandes (dispositivos con resoluciones ≥ 576px);.col-mdpara tabletas (≥768px);.col-lgpara portátiles (≥992px);.col-xlpara computadoras de escritorio (≥1200px)
Supongamos que desea mostrar dos columnas una tras otra verticalmente en pantallas pequeñas y en la misma línea en pantallas más grandes. Deberá especificar el punto de interrupción donde van las columnas en la misma línea.
En nuestro ejemplo usaremos el .col-lgpunto de interrupción y veremos cómo se ven las columnas en diferentes pantallas. Para resoluciones inferiores al punto de interrupción dado (<992px), las columnas se mostrarán verticalmente. Esto significa que en dispositivos móviles y tabletas, las columnas se verán así:
Y para los dispositivos que tienen una resolución mayor o igual al punto de interrupción (≥992px), las columnas irán en la misma fila. Esto significa que en computadoras portátiles y de escritorio obtendrá este resultado:
... ... Puede ver el código en vivo en CodePen.Si abre el Codepen en otra ventana y ve la página en diferentes resoluciones, verá que las columnas cambian su posición.
Si quisiera que las 2 columnas estuvieran en la misma línea, comenzando con teléfonos móviles más grandes .col-sm, usaría para tabletas .col-mdy para pantallas extra grandes .col-xl.
Establecer tamaños y puntos de interrupción para columnas
Puede combinar los tamaños y los puntos de corte y usar una sola clase con el formato .col-[breakpoint]-[size].
Por ejemplo, si desea que tres columnas de diferentes tamaños se alineen en una fila comenzando con la resolución de la computadora portátil, debe hacer esto:
... ... ... Obtendrá este resultado en resoluciones <992px:
Y para pantallas de ≥992px:
Nuevamente, puede ver el código en vivo en CodePen.
Pero, ¿qué sucede si desea mostrar una columna por fila en pequeñas resoluciones móviles, dos columnas por fila en tabletas y cuatro en computadoras portátiles o dispositivos con resoluciones más altas?
Luego agrega varias clases para una sola columna para describir el comportamiento de cada resolución. Al usar varias clases, especifica que el contenido ocupará seis espacios en tabletas y tres en computadoras portátiles.
... ... ... ... El resultado se mostrará así en las tabletas:
Y así en portátiles y resoluciones más altas:
Este ejemplo también está disponible en CodePen.
Como ejercicio, puede intentar crear filas con diferente número de columnas según el tamaño de la pantalla y verificar el comportamiento en la consola de su navegador.
Desplazamiento de columnas
Si no desea que sus columnas estén una al lado de la otra, puede usar la clase .offset-[breakpoint]-[size]junto con .col-[breakpoint]-[size].
Usar esta clase es lo mismo que agregar una columna vacía antes de su columna. Aquí hay un ejemplo simple:
... ... Puede ver el código en vivo en CodePen.
Puede usar la clase en cualquier columna de la fila. A continuación se muestran algunos ejemplos más:
... ... ... ... ... Columnas anidadas
Esto puede ser una sorpresa, ¡pero puede agregar una fila dentro de una columna!
La fila en cuestión (que tendrá el ancho de su columna principal) se dividirá en 12 columnas (más pequeñas) a las que puede hacer referencia a través de las .col-* clases.
Echemos un vistazo a lo que sucede cuando insertamos una nueva fila dentro de una columna:
... ... ... ... Puede ver el código en vivo en CodePen.
Sabiendo esto, puede profundizar en muchos niveles para organizar su información. Las columnas le proporcionarán una forma sencilla de administrar su espacio.
Esto resume los conocimientos básicos sobre el sistema de cuadrícula receptiva Bootstrap 4. Si tiene preguntas, hágamelo saber en los comentarios, estaré encantado de responder.
Otras lecturas
Si tiene más tiempo, aquí tiene algunos recursos útiles:
- Documentación oficial de Grid de GetBootstrap
- Video tutorial de Scrimba
Este artículo se publicó inicialmente en el blog BootstrapBay. Es parte de una serie más grande de tutoriales de Bootstrap 4 llamada 14 Days of Bootstrap 4. Si desea continuar aprendiendo sobre los componentes de Bootstrap 4, estos artículos son un buen lugar para comenzar.
Y si desea impulsar su desarrollo con una plantilla Bootstrap, puede consultar nuestro mercado.
¡Pero antes de profundizar más, tómate un momento para celebrar tus habilidades recién adquiridas !?
