Bootstrap 5 colonne e sistema di griglia | Spiegato

Bootstrap 5 è ​​l'ultima versione del framework Bootstrap che consente ai suoi utenti di creare siti Web straordinari con fogli di stile CSS rapidi e una maggiore reattività. Bootstrap funziona costruendo un sistema a griglia che divide una pagina web in varie righe e colonne che sono avvolte all'interno di un contenitore. Questo post discute in dettaglio il sistema Grid in Bootstrap 5 insieme ai suoi vari componenti.

Sistema della griglia in bootstrap 5

Un sistema a griglia in bootstrap 5 divide una pagina in righe e colonne, con ogni riga con 12 colonne. È possibile utilizzare tutte le 12 colonne se lo desideri, tuttavia, in caso contrario, è possibile combinare colonne per creare colonne più ampie. Devi utilizzare le colonne in modo tale che la somma aggiunga fino a 12 o meno di 12. Ad esempio, è possibile utilizzare tutte e 12 le colonne con una larghezza di 1 o 2 colonne con una larghezza di 6. Qualunque sia la combinazione, il totale dovrebbe essere 12 o meno.

Questo sistema di griglia è costituito da Flexbox rendendo così gli elementi presenti nella griglia reattivi, il che significa che il layout cambierà la sua struttura a seconda del dispositivo su cui viene visualizzato. Ecco una rappresentazione visiva di un sistema di griglia.

Classi di griglia in bootstrap 5

Ai fini dell'utilizzo del sistema di griglia, sono disponibili più classi di cui abbiamo discusso di seguito. Tutte queste classi possono essere raggruppate insieme per fare strutture più flessibili e reattive.

1. -Classe XS

Questa classe viene utilizzata per creare un sistema a griglia per dispositivi extra piccoli con una larghezza dello schermo <576px.

2. -SM- Classe

Questa classe viene utilizzata per creare un layout della griglia per piccoli dispositivi con una larghezza dello schermo> = 576px.

3. -Classe MD

Questa classe viene utilizzata per creare un sistema a griglia per dispositivi medi con una larghezza dello schermo> = 768px.

4. -classe LG

Questa classe viene utilizzata per creare un sistema a griglia per dispositivi di grandi dimensioni con una larghezza dello schermo> = 992px.

5. -XL- Classe

Questa classe viene utilizzata per creare un sistema a griglia per dispositivi extra-large con una larghezza dello schermo> = 1200px.

6. -XXL- Classe

Questa classe viene utilizzata per creare un sistema a griglia per dispositivi extra-large con una larghezza dello schermo> = 1400px.

Nota: Le classi di cui sopra hanno la capacità di aumentare la larghezza, pertanto, se si desidera utilizzare la stessa larghezza per le classi medie e grandi, ad esempio, è necessario specificare la larghezza solo per la classe media.

Componenti di un sistema di griglia

Un sistema di griglia funziona con tre componenti discussi in questa sezione.

1. Contenitori

Un contenitore è un elemento base di un sistema a griglia senza il quale il sistema non funziona. Questi avvolgono tutto il contenuto di un sito Web al loro interno. I contenitori avvolgono il contenuto in modo tale che questi trattengano elementi di riga e elementi di riga trattengono gli elementi della colonna.

2. File

Le righe in un sistema a griglia sono indicate come il gruppo orizzontale di colonne. Queste righe possono essere generate usando il .riga classe e sono avvolti all'interno di un contenitore usando il .contenitore, O .Container-Fluid classe.

3. Colonne

Un sistema di griglia è composto da 12 colonne che sono avvolte all'interno delle righe. Per creare queste colonne .col La classe viene utilizzata insieme alla combinazione di una qualsiasi delle classi menzionate nella sezione precedente. Ad esempio, se stai creando un layout per dispositivi extra piccoli, allora usa .col-xs classe.

Costruire un sistema di griglia di base in bootstrap 5

Qui dimostreremo come puoi creare un sistema di griglia di base in due diversi scenari.

scenario 1

Quando si desidera controllare la larghezza delle colonne e specificare il layout per diversi tipi di dispositivi che la visualiranno.

In questo modo puoi creare una struttura di base di un sistema a griglia quando si desidera specificare le larghezze della colonna per diversi tipi di dispositivi. IL .riga La classe viene utilizzata per generare righe, ad esempio, quanto sopra crea due righe. Le prime righe gruppi tre colonne, mentre la seconda riga ha due colonne.

Quando si generano colonne, utilizzare il .col classe insieme a specificare il tipo di dispositivo e un numero che dovrebbe aggiungere fino a un totale di 12 per ogni riga.

Scenario 2

Quando si desidera che Bootstrap gestisca automaticamente la larghezza delle colonne.

Ora, quando non si specifica la dimensione del dispositivo e nessun numero che aggiunge fino a un totale di 12, bootstrap 5 gestirà automaticamente le larghezze e il layout cambierà il suo comportamento in base al tipo di dispositivo.

Qualche esempio

Ora esploreremo alcuni esempi per comprendere meglio un sistema a griglia e colonne in bootstrap 5.

Esempio 1

Qui genereremo quattro colonne di uguale larghezza.

Html

Nel codice sopra per creare quattro colonne di uguale larghezza stiamo usando il .Container-Fluid Classe per ottenere un contenitore a larghezza intera che si estende sulla larghezza completa del viewport. Quindi stiamo generando una riga e avvolgiamo quattro colonne di uguale larghezza all'interno di quella riga. Ad ogni colonna è stata data una certa imbottitura usando il .P-4 Classe di imbottitura e utilità, inoltre, ogni colonna è stata assegnata un po 'di colore di sfondo e il colore del testo.

Produzione

Le colonne con larghezze uguali sono state create correttamente.

Esempio 2

Nell'esempio sopra abbiamo visto come possiamo creare quattro colonne di uguale larghezza. Ora rendiamo queste colonne reattive.

Html

Stiamo rendendo reattive le colonne usando il .Col-MD-3 Classe che specifica che le colonne si accumuleranno l'una sull'altra quando la larghezza dello schermo è inferiore a 768px.

Produzione

Quando la larghezza dello schermo è uguale e maggiore di 768px.

Quando la larghezza dello schermo è inferiore a 768px.

Sono state generate colonne reattive.

Esempio 3

Le colonne reattive sopra erano uguali in larghezza. Ora generiamo colonne reattive di larghezza ineguale.

Html

IL .Col-MD-4, E .Col-MD-8 Le classi creano due colonne reattive di larghezza ineguale per dispositivi medi.

Produzione

Quando la larghezza dello schermo è> = 768px.

Quando la larghezza dello schermo è <768px.

Sono state generate due colonne reattive con larghezza ineguale.

Conclusione

Un sistema a griglia in Bootstrap 5 funziona con tre componenti che sono un contenitore, righe e colonne. Fondamentalmente divide una pagina in righe e colonne, con ogni riga con 12 colonne. Le colonne di un sistema a griglia sono utilizzate in modo tale che la somma aggiunga fino a 12 o meno di 12. Inoltre, utilizza alcune classi per creare layout reattivi per vari tipi di dispositivi. Questo post discute in dettaglio il sistema della griglia e le colonne con l'aiuto di esempi appropriati.