Sistema a griglia Bootstrap 4

Sistema a griglia Bootstrap 4

Il sistema a griglia di Bootstrap consente fino a 12 colonne nella pagina.

Se non desideri utilizzare tutte e 12 le colonne singolarmente, puoi raggruppare le colonne per creare colonne più larghe:

Il sistema a griglia di Bootstrap è reattivo e le colonne verranno riorganizzate in base alle dimensioni dello schermo: su uno schermo grande potrebbe avere un aspetto migliore con il contenuto organizzato in tre colonne, ma su uno schermo piccolo sarebbe meglio se gli elementi di contenuto fossero impilati uno sopra l'altro.

Classi griglia

Il sistema a griglia Bootstrap 4 ha cinque classi:

• .col- (dispositivi extra piccoli - larghezza dello schermo inferiore a 576px)
• .col-sm- (dispositivi di piccole dimensioni - larghezza dello schermo uguale o superiore a 576px)
• .col-md- (dispositivi medi - larghezza dello schermo uguale o superiore a 768px)
• .col-lg- (dispositivi di grandi dimensioni - larghezza dello schermo uguale o superiore a 992px)
• .col-xl-(dispositivi xlarge - larghezza dello schermo uguale o superiore a 1200px)

Le classi sopra possono essere combinate per creare layout più dinamici e flessibili.

Suggerimento: ogni classe aumenta, quindi se desideri impostare le stesse larghezze per sme md, devi solo specificare sm.

Regole del sistema a griglia

Alcune regole del sistema di griglia Bootstrap 4:

• Le righe devono essere posizionate all'interno di un .container(larghezza fissa) o .container-fluid(larghezza intera) per un corretto allineamento e riempimento
• Usa le righe per creare gruppi orizzontali di colonne
• Il contenuto deve essere posizionato all'interno di colonne e solo le colonne possono essere figli immediati di righe
• Classi predefinite come .row e .col-sm-4sono disponibili per creare rapidamente layout di griglia
• Le colonne creano grondaie (spazi tra il contenuto delle colonne) tramite riempimento. Tale riempimento è sfalsato nelle righe per la prima e l'ultima colonna tramite il margine negativo attivato.rows
• Le colonne della griglia vengono create specificando il numero di 12 colonne disponibili che si desidera estendere. Ad esempio, tre colonne uguali ne userebbero tre.col-sm-4
• Le larghezze delle colonne sono in percentuale, quindi sono sempre fluide e dimensionate rispetto all'elemento padre
• La più grande differenza tra Bootstrap 3 e Bootstrap 4 è che Bootstrap 4 ora utilizza flexbox, invece di float. Un grande vantaggio di flexbox è che le colonne della griglia senza una larghezza specificata verranno automaticamente posizionate come "colonne di uguale larghezza" (e uguale altezza). Esempio: tre elementi con .col-smsaranno automaticamente larghi ciascuno il 33,33% dal punto di interruzione piccolo in su. Suggerimento: se vuoi saperne di più su Flexbox, puoi leggere il nostro tutorial CSS Flexbox .

Struttura di base di una griglia Bootstrap 4

Quella che segue è una struttura di base di una griglia Bootstrap 4:

Primo esempio: creare una riga ( <div class="row">). Quindi, aggiungi il numero desiderato di colonne (tag con .col-*-*classi appropriate). La prima stella (*) rappresenta la reattività: sm, md, lg o xl, mentre la seconda stella rappresenta un numero, che dovrebbe sempre sommare 12 per ogni riga.

Secondo esempio: invece di aggiungere un numero a ciascuno col, lascia che bootstrap gestisca il layout, per creare colonne di uguale larghezza: due "col"elementi = 50% di larghezza per ogni col. tre colonne = 33,33% di larghezza per ciascuna col. quattro colonne = 25% di larghezza, ecc. Puoi anche usare .col-sm|md|lg|xlper rendere le colonne reattive.

Opzioni griglia

La tabella seguente riassume il funzionamento del sistema a griglia Bootstrap 4 su schermi di diverse dimensioni:

Esempi

I capitoli successivi mostrano esempi di sistemi a griglia per diversi dispositivi e larghezze dello schermo:

• Accatastati in orizzontale
• Disposizione extra piccola
• Piccoli dispositivi
• Dispositivi medi
• Dispositivi di grandi dimensioni
• Dispositivi extra large
• Altri esempi di griglia