Como pueden observar, Boostrap 4 nos ofrece muchas opciones y herramientas como su sitema de grillas (Columnas), barras de navegacion (Navbars) y Sliders (carrusel de contenido/imagenes)
muy utiles que nos pueden ayudar a resolver muchos temas que si lo hicieramos cotidianamente (a brazo de hombre con barba de leñador) se nos dificultaria mucho y seria muy tardado,
por eso les demostrare como se utilizan estas herramientas:
Empezemos con el sistema de Grillas (Columnas):
Las Grillas en Bootstrap ayudan a que el contenido sea mas fluido y se comporte de la mejor manera posible con el diseño que nosotros queremos darle, al ver que la metodologia de bootstrap es “Mobile First”, el sistema de grillas nos ayuda a que sea mas facil a que nuestro sitio web sea Responsive Design (Que se vea chevere en todos los dispositivos),
para eso Bootstrap nos ofrece un sistema bastante comodo y facil de entender!
Primero que nada, debemos saber que todo se maneja por medio de “CLASES” y con la utilizacion de el tag “DIV”:
<divclass="container-fluid">
<divclass="row">
<divclass="col-md-6">
</div>
</div>
</div>
Como pueden ver, para iniciar una sección o un apartado se recomienda utilizar un contenedor definido por Boostrap, los cuales son los siguientes:
<div class="container-fluid"></div>
<div class="container"></div>
Lo que es “Container-fluid” nos sirve para crear un contenedor que abarque todo el ancho de la pagina, mientras que “container” nos funciona de la misma manera solo que dejando un margen a los costados, mejorando el aspecto visual final.
Por que no copias y pegas el siguente codigo que te dejo para que te des una idea de que hablo:
<div class="container-fluid" style="background-color: red; width: 100%; height: 300px; border-radius: 20px;"></div>
<div class="container" style="background-color: blue; width: 100%; height: 300px; border-radius: 20px;"></div>
Esos son los contenedores!! 😄
Tambien Bootstrap para que podamos acomodar mejor las cosas nos permite manejar el diseño en “Filas y Columnas”, y como podemos definir esto?, pues de la misma manera de como te lo acaba de decir pero en ingles:
<divclass="row">
<divclass="col"></div>
</div>
Los que es “row” facilmente nos indica que creamos una fila de inlimitadas que podemos colocar!, y la clase “col” nos indica que vamos a ocupar una columna.
Nota: Bootstrap nos puede permitir colocar hasta 12 columnas (“col”) dentro de una fila (“row”).
Si queremos agregar mas columnas en la misma fila simplemente basta con agregar otro “div” con la clase “col” debajo del anterior:
<divclass="row">
<divclass="col"></div>
<divclass="col"></div>
<divclass="col"></div>
<divclass="col"></div>
<divclass="col"></div>
</div>
Pruébalo tu mismo y date el lujo de decir que ya sabes Bootstrap 4 (lo básico, pero lo sabes).
<divclass="row">
<divclass="col">Hola a Todos!</div>
<divclass="col">Este es un Tutorial</div>
<divclass="col">Para la comunidad de Platzi</div>
<divclass="col">Utilizando Bootstrap 4</div>
<divclass="col">Y su sistema de filas y columnas</div>
</div>
Y asi es como se utilizan las filas y columnas, cabe recalcar que dentro de las columnas (“col”) ya podemos agregar todo el contenido que queramos!
Muy bien ya sabes como crear tus propios contenedores, filas y columnas!!
Ahora solo falta explicar algo un tanto divertido:
Ademas de colocar la clase “row” y dentro de ella la clase “col”, junto a la clase “col” tambien podemos agregarle unas pequeñas clases para que puedas empezar a trabajar con el tema de “mobile first”, los cuales ahora te los explico:
xs - “Extra Small” sirve para todos aquellos dispositivos que esten por debajo del ancho de 576px (Telefonos parados).
sm - “Small” sirve para todos los dispositivos que esten entre el rango 576px y 768px de ancho (Telefonos acostados).
md - “Medium” sirve para todos los dispositivos que esten entre el rango 768px y 992px de ancho (Tablets).
lg - “Large” sirve para todos los dispositivos que esten entre el rango 992px y 1200px de ancho (Desktops).
**xl **- “Extra Large” este sirve para todos los dispositivos que se encuentren por encima de los 1200px de ancho (Patallas de 32pg por ejemplo).
pero te estaras preguntando, como se ulizan esas cosas?, bueno ahora te lo digo:
Despues de escribir la clase “col”, ponemos un guión ("-") <—(jijij parece una carita), PERO ES UN GUIÓN, y seguido de ese guión colocamos algunas de las clases que antes he explicado, ejemplo:
<divclass="row">
<divclass="col">Hola a Todos!</div>
<divclass="col-sm">Este es un Tutorial</div>
<divclass="col-md">Para la comunidad de Platzi</div>
<divclass="col-lg">Utilizando Bootstrap 4</div>
<divclass="col-xl">Y su sistema de filas y columnas</div>
</div>
Pero te estaras preguntando tambien, oye por que no colocaste el “col-xs”?, debido a que en la ultima versión de Bootstrap ya se agrega el sistema flex, los programadores decidieron que no es necesario poner esa clase, simplemente con que se coloque “col” se da por hecho que es una clase “col-xs”; es aqui la metodologia de “Mobile first” ya que primero tomamos en cuenta como se ve en dispositivos mobiles.
Una vez mencionado esto, tambien debemos de colocar una cosa extra si queremos darle un aspecto mas personalizado, pero antes dejenme mencionarles algo importante:
Como el sistema de grillas utiliza un “Display Flex” este es totalmente reajustable o mas bien las columnas se ajustan a todo el ancho del contenedor automaticamente, que quiero decir:
De tal modo que si solo colocamos 3 “col” estos se reajustaran de tal modo que cada uno quede con un ancho exactamente igual repartido en todo el contenedor, ejemplo:
Tenemos 3 “col” y estos se reparten en todo el ancho, entonces si tenemos un ancho de 100px, cada uno tomara un ancho de 33.3px de ancho.
Facil no?, y asi mismo si colocamos 12 “col” estos se reajustaran a todo el ancho quedando todos con un ancho del mismo tamaño!.
Pero esto viene a lo que comentaba antes, que para hacerlo mas personalizado nosotros podemos controlar el ancho de cada fila con solo colocar el numero de espacios que queremos que utilize dicha “col”:
<divclass="row">
<divclass="col-12">Hola a Todos!</div>
<divclass="col-md">Este es un Tutorial</div>
<divclass="col-md-4">Para la comunidad de Platzi</div>
<divclass="col-lg-7">Utilizando Bootstrap 4</div>
<divclass="col-lg">Y su sistema de filas y columnas</div>
</div>
Explico:
-Con “col-12” indico que cuando la pantalla este por debajo de la resolución de “xs : =< 576px” la columna abarque todo el ancho del contenedor.
-Con “col-md y col-md-4” estoy indicando que cuando este en la resolución de “Medium: => 768px” la columna que tiene el numero “4” tomara solamante 4 espacios de los 12 que tiene disponible (esto es de acuerdo al total de columnas que pueden entrar en una fila) y el resto de espacios (es decir 8 espacios) los toma el “col-md” que no tiene definido un numero de columnas, esto aclara lo que dije que son reajustables o toman el espacio disponible restante en el contenedor.
-Del mismo modo para “col-lg-8 y col-lg” la columna de “lg-7” cuando esten el la resolución de 992px en adelante tomara esa columna 7 columnas de las 12 disponibles y “col-lg” tomara el resto (12-7= 5 columnas sobrantes).
Muy bien, ahora sabes como colocar columnas y que tengan diferentes comportamientos en diferentes resoluciones, Genial.
Fabuloso, Ahora te reto a que juegues con varias filas (“row”) y coloques el maximo de columnas (“col”) dentro de ellas y almismo tiempo utilizando las diferentes clases de tamaño y empiezes a hacer rezise al navegar para ver que pasa, puedes agregar estilos para que que te des cuenta que ahora es mas facil y rapido elaborar tus paginas!
https://getbootstrap.com/docs/4.0/layout/overview/
Saludos.
Lenin Felix.