Nozione di griglia¶
Il principio di una griglia
Una griglia è semplicemente un taglio in celle delle stesse dimensioni come mostrato di seguito:
La griglia di Bootstrap ha 12 colonne.
Terminologia
Una griglia è divisa in righe (chiamate «row» in Bootstrap e «Line» in WebAcappella RC) e colonne («col»), come nella figura seguente :
La Griglia della Stivalina
La divisione delle colonne divide la larghezza dello schermo in percentuali. Per le righe, invece, l’altezza verrà regolata in base al contenuto.
Organizzazione della griglia¶
Bootstrap considera 4 tipi di media:
Grande (Lg) |
Bn |
Sm |
Xsmall (Xs) |
|---|---|---|---|
|
|
|
|
Valore di riferimento |
Valore di riferimento |
Valore di riferimento |
Valore di riferimento |
>= 1200 px |
>= 992 px |
>= 768 px |
< 768 px |
E in WebAcappella Grid?
Una griglia è definita in WAGRID dal pulsante » BOX » che conterrà quante righe desiderate con una larghezza massima di 12 colonne per riga.
Una riga (riga in Bootstrap) conterrà elementi (testo, immagine, ecc.).
I 2 componenti principali sono il «BOX» e la «LINEA».
Nota
BOX: Questo è il componente primario (e quindi indispensabile), l’unico a cui si possono aggiungere linee.
Nota
LINEA: Componente che permette di includere immagini, testo, una galleria, ecc.
Una riga è divisa in 12 colonne (vedi bootstrap), un componente come un’immagine può essere largo almeno 1 colonna e al massimo 12 colonne.
In totale, possiamo quindi avere 12 componenti di 1 unità di larghezza.
Per quanto riguarda l’altezza di una riga, essa dipende dalla dimensione della larghezza del componente o dei componenti inseriti (nozione di razione per un’immagine, nozione di contenuto per il testo in particolare).
La nozione di rapporto si riferisce ad una nozione di proporzionalità (larghezza*altezza) e quindi di «ridimensionamento» di un’immagine.
Il contenuto ha una nozione di «fluidità», cioè il contenuto deve apparire in tutti i casi e quindi se si riduce la larghezza (perdita di contenuto quindi), questo sarà inevitabilmente compensato da un guadagno in altezza.
Il distanziatore è un componente separato nel senso che ha una dimensione fissa, che permette di generare un margine.