Bootstrap 4 : la nuova griglia.

Titolo: Bootstrap 4 : la nuova griglia.
Sezione: web
Data: 17.01.2019

Bootstrap 4 apporta molte modifiche e nuove funzionalità alla struttura a griglia che ...

Bootstrap 4 apporta molte modifiche e nuove funzionalità alla struttura a griglia che tutti conosciamo nella versione 3. La nuova griglia è ora supportata da Flexbox, molte classi di utilità sono state rinominate e un nuovo punto di interruzione XL è stato aggiunto.

1. Griglia di base – Ormai tutti sanno come funziona la griglia Bootstrap. Abbiamo 12 file separate in  parti uguali con colonne che vanno all’interno delle righe. Ogni colonna può contenere da 1 a 12 spazi: 
Strutturalmente nulla è cambiato, la griglia ha ancora righe e 12 colonne. Tuttavia, ci sono cambiamenti nella larghezza dei contenitori, così come altre piccole modifiche come il livello più basso del punto di interruzione che viene rinominato da col-xs- in semplicemente .col-

2. Layout automatico – Una nuova funzionalità della griglia Bootstrap 4 è la modalità di layout automatico. Permette agli sviluppatori di lasciare la dimensione delle colonne, facendoli distribuire automaticamente lo spazio in quella riga. 
Le colonne sizeless .col- condividono lo spazio disponibile allo stesso modo, riempiendo sempre l’intera riga. Se vogliamo che una colonna sia più grande o più piccola, possiamo ancora farlo con una classe .col-size.

3. Wrapping delle colonne – Quando la somma di tutte le colonne di una riga è superiore a 12, la prima colonna aggiuntiva si sposterà alla riga successiva. Questo è noto come wrapping  di colonne e funziona come nel bootstrap non-flexbox.  
L’unica cosa da notare qui è che quando si utilizza il layout automatico, una colonna senza spessore  può occupare l’intera riga una volta completata.

4. Griglia responsiva – Come accennato nell’introduzione, Bootstrap 4 ha un nuovo livello di griglia XL in cima a quelli vecchi. Ora le query sui media della griglia sono simili a queste:

Extra piccolo (xs) – inferiore a 576 px

Piccolo (sm) – tra 576px e 768px

Medio (md) – tra 768px e 992px

Grande (lg) – tra 992px e 1200px

Extra Large (xl) – oltre 1200px

A parte questo, non ci sono stati cambiamenti nel modo in cui funziona la reattività.

5. Altezza colonna – Il vecchio sistema di griglia è stato costruito su elementi flottati e per questo ogni colonna ha un’altezza diversa, a seconda del contenuto che contiene. Nei layout di flexbox tutte le celle di una riga sono allineate per essere alte quanto la colonna con la maggior parte dei contenuti.

Alla prossimo post con la seconda parte.

Kenji Agency : creazione siti web a Treviso