Source: https://www.cubicfactory.com/bootstrap-entender-el-modelo-de-rejilla/
Timestamp: 2020-07-10 03:20:52+00:00

Document:
Bootstrap: entender el modelo de rejilla (II) - Cubic Factory
Tú estás aquí: Inicio / CubicLabs / Diseño web y marketing online / Bootstrap: entender el modelo de rejilla (II)
Bootstrap: entender el modelo de rejilla (II)
Área: Diseño Web & Ecom
La rejilla o grid es la base sobre la que construiremos el layout de nuestra página, es decir, la disposición de elementos. Es el componente esencial para asegurar que nuestra web se adaptará convenientemente a diferentes resoluciones y pantallas. Bootstrap utiliza un modelo de rejilla basado en dos tipos de contenedores y una rejilla de 12 columnas que resulta muy flexible, y que como veremos podemos también alterar cuando nos resulte conveniente.
Anchura total de la página con Bootstrap: ¿100% o limitada?
En muchas ocasiones, hacer RESPONSIVE una página no quiere decir hacer que ocupe el 100% de la anchura de cualquier monitor en el que se vaya a mostrar, sino que existe la tendencia a interrumpir el escalado al llegar a cierto tamaño, de modo que en monitores de 1600 ó 1920 pixels de resolución (que ya hay bastantes) veremos espacio vacío a izquierda y derecha. Tenemos tres posibilidades:
Utilizar una anchura limitada (nada rebasa esa anchura)
Utilizar el 100% de la anchura del monitor para todo el contenido
Utilizar el 100% de la anchura del moniotor sólo para distribuir “bandas” de visualización (con fondos que ocupen el ancho total) y luego dentro de esos fondos ya acotar el contenido a una anchura limitada
Gestionar cual de estos modelos queremos utilizar será muy sencillo en Bootstrap, puesto que nos ofrece dos estilos que nos permiten realizar las 3 combinaciones:
Utilizar una anchura limitada:
<div class=”container”> aquí nuestros contenidos acotados en anchura </div>
Utilizar anchura completa para todo el contenido:
<div class=”container-fluid”> aquí nuestros contenidos al 100% de página </div>
Y si queremos combinar ambas opciones podremos hacer esto:
<div class=”container”> aquí nuestros contenidos </div>
Anchuras de página para diferentes resoluciones
Hablamos del caso en que estamos utilizando containers de anchura limitada, y no al 100%. ¿A cuánto está limitada esa anchura? Bootstrap establece 4 tamaños diferentes de pantalla, con sus correspondientes tres puntos de corte:
Pantallas grandes (lo que llaman LG) a partir de 1200 pixels
Pantlallas medias (serán las MD) a partir de 992 pixels
Pantallas tipo tablet (las SM) a partir de 768 pixels
Pantallas móviles (o pantallas XS), por debajo de esa cifra.
De tal manera, si estamos utilizando containers de anchura limitada, sabemos que estos medirán como mucho 1200 pixels en pantallas grandes, y el 100% de la anchura de pantalla en cualquier pantalla menor de esa resolución.
Esto se parece un poco a lo que se venía haciendo antes de la época del diseño web Responsive, con el layout típico de 960pixels: sabíamos que esa era la anchura máxima, y con pantallas por debajo de eso (barras de scroll aparte) habría scroll horizontal. Aquí la diferencia es que no hay nunca scroll horizontal. Por debajo de 1200, estaremos siempre usando el 100% de pantalla y los elementos se moverán de sitio o se escalarán. El siguiente paso es ver cómo lo hacen.
El modelo de rejilla de 12 columnas de Bootstrap
Básicamente, lo que hace Bootstrap es definir un modelo de divisor horizontal (una fila) divisible en 12 columnas. Pero con la ventaja de que podemos decir cuantas hay en cada resolución de pantalla. Esto es muy fácil de entender con un ejemplo simple: pensemos en una serie de bloques (imagenes, divisores.. lo que sea) que cuando estamos en pantalla LG (más de 1200 pixels) queremos que estén todos en fila. Pero que a medida que se vaya estrechando la pantalla, en vez de desaparecer de la vista, vayan saltando de línea: 3 por fila en resolución MD (de más de 992 pixels), 2 por fila en resoluciones SM (de más de 768px), y uno por fila en móviles (pantalla XS)
Para eso, sólo tenemos que definir columnas en las que introducir los divisores con la siguiente pauta:
Resolución LG: queremos los 4 bloques en fila. Como hay 12 columnas… pues está claro: 3 partes de 4 columnas
Resolución MD: queremos 3 bloques por fila: como hay 12 columnas, necesitaremos 4 partes de 3 columnas
Resolución SM: queremos 2 bloques por fila: como hay 12 columnas, pondremos 6 partes de 2 columnas
Resolución XS: queremos 1 bloque por fila: es decir, una parte de 12 columnas.
¿Fácil, verdad? el código correspondiente a ese razonamiento será el siguiente:
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″> nuestro bloque </div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″>nuestro bloque </div>
Con esto conseguimos divisores que en función de la anchura de pantalla (lg, md, sm ó xs) se comportan midiendo 3,4,6 ó 12 columnas.
El resultado gráfico sería algo así, un conjunto de bloques que si la pantalla es suficientemente ancha están todos en fila, y que a medida que esa anchura disminuye van saltando de fila según le hemos especificado en nuestro código:
Hasta aquí todo muy fácil. Pero ¿qué pasa cuando este convenio no nos sirve por algún motivo? Por ejemplo
Mi empresa tiene 5 servicios principales. Y 12 es difícilmente divisible en 5, así que no puedo hacer 5 columnas iguales. ¿o sí?
Quiero hacer una web para una intranet de una empresa muy tecnológica, donde 1200 es una resolución de risa. Necesito un grid de anchura fija pero que ésta sea 1600 y no 1200. ¿Es posible?
En la siguiente entrada nos ocuparemos de esto, profundizando un poco más en el modelo de grid y viendo como los media-queries nos permiten retocarlo a nuestro antojo.
Cubic Web & Ecom Factory
Todos los artículos sobre Diseño Web, Ecommerce y Marketing online:
Enfold Toolkit. Personalizando Enfold a tu gusto13/11/2016 - 18:27
Bootstrap: Tablas responsive con StackTable (IV)25/09/2015 - 12:12
Bootstrap: modificando la rejilla. Los media queries (III)18/08/2015 - 11:42
Bootstrap: entender el modelo de rejilla (II)27/07/2015 - 11:30
Bootstrap, framework HTML5 para diseño web responsive (I)21/06/2015 - 15:04
Tutorial Ventanas emergentes con JQuery30/10/2013 - 11:45
OFICINAS CERRADAS AL PÚBLICO HASTA FIN DE CUARENTENA COVID-19
Bootstrap, framework HTML5 para diseño web responsive (I) Bootstrap: modificando la rejilla. Los media queries (III)

References: resolución 
 resolución 
 resolución 

Resolución 

Resolución 

Resolución 

Resolución 
 resolución