Noción de cuadrícula¶
El principio de una red
Una cuadrícula es simplemente un corte en las células de las mismas dimensiones que se muestran a continuación:
La cuadrícula de Bootstrap tiene 12 columnas.
Terminología
Una cuadrícula se divide en filas (llamadas «row» en Bootstrap y «Line» en WebAcappella RC) y columnas («col»), como en la siguiente figura :
La red de Bootstrap
La división de la columna divide el ancho de la pantalla en porcentajes. Para las filas, sin embargo, la altura se ajustará al contenido.
Organización de la red¶
Bootstrap considera 4 tipos de medios:
Grande (Lg) |
Bn |
Sm |
Xpequeño (Xs) |
|---|---|---|---|
|
|
|
|
Valor de referencia |
Valor de referencia |
Valor de referencia |
Valor de referencia |
>= 1200 px |
>= 992 px |
>= 768 px |
< 768 px |
¿Y en WebAcappella Grid?
Una cuadrícula se define en WAGRID por el botón «BOX» que contendrá tantas filas como se desee con un ancho máximo de 12 columnas por fila.
Una línea (fila en Bootstrap) contendrá elementos (texto, imagen, etc.).
Los dos componentes principales son la «CAJA» y la «LÍNEA».
Nota
RECUADRO: Este es el componente primario (y por lo tanto indispensable), el único en el que se pueden añadir líneas.
Nota
LÍNEA: Componente que permite incluir imágenes, texto, una galería, etc.
Una fila se divide en 12 columnas (véase bootstrap), un componente como una imagen puede tener al menos 1 columna de ancho y al máximo 12 columnas de ancho.
Por lo tanto, en total, podemos tener 12 componentes de 1 unidad de ancho.
En cuanto a la altura de una línea, depende del tamaño del ancho del componente o componentes insertados (noción de ración para una imagen, noción de contenido para el texto en particular).
La noción de relación se refiere a una noción de proporcionalidad (anchura*altura) y por lo tanto de «redimensionamiento» de una imagen.
El contenido tiene una noción de «fluidez», es decir, el contenido debe aparecer en todos los casos y, por lo tanto, si se reduce la anchura (pérdida de contenido por lo tanto), esto se compensará inevitablemente con una ganancia de altura.
El espaciador es un componente separado en el sentido de que tiene un tamaño fijo, lo que permite generar un margen.