IL GRID SYSTEM
Il Grid System di Bootstrap è il Sistema a Griglia utilizzato per la creazione di layout responsivi e mobile-first. Utilizza una serie di contenitori, righe e 12 colonne per la disposizione e l’allineamento dei contenuti. Scritto con FlexBox, viene fornito con tantissime classi pronte ad essere impiegate nelle nostre pagine web.
Il sistema a griglia è responsive e le colonne si riorganizzeranno automaticamente in base alle dimensioni dello schermo. Assicurati che la somma sia 12 o meno (non è necessario utilizzare tutte le 12 colonne disponibili).
CLASSI DELLA GRIGLIA DI BOOTSTRAP
Il sistema a griglia Bootstrap 5 ha sei classi:
- .col- (dispositivi extra piccoli – larghezza dello schermo inferiore a 576px)
- .col-sm- (piccoli dispositivi – 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)
- .col-xxl- (dispositivi xxlarge – larghezza dello schermo uguale o superiore a 1400px)
Le classi di cui sopra possono essere combinate per creare layout più dinamici e flessibili.
STRUTTURA BASE DELLA GRIGLIA BOOTSTRAP 5
Quella che segue è una struttura di base di una griglia Bootstrap 5:
<!– Control the column width, and how they should appear on different devices –>
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<!– Or let Bootstrap automatically handle the layout –>
<div class=”row”>
<div class=”col”></div>
<div class=”col”></div>
<div class=”col”></div>
</div>
Il primo esempio: crea una riga (<div class=”row”>). Quindi, aggiungi il numero di colonne desiderato (tag con classi .col-*-* appropriate). La prima stella (*) rappresenta: sm, md, lg, xl o xxl, mentre la seconda stella rappresenta un numero, che dovrebbe essere la somma di 12 elementi per ogni riga. Il secondo esempio: invece di aggiungere un numero a ogni col, lascia che bootstrap gestisca il layout, per creare colonne di uguale larghezza: due elementi “col” = 50% di larghezza per ogni col, mentre tre cols = 33,33% di larghezza per ogni col. Quattro colonne = 25% di larghezza, ecc. Puoi anche usare .col-sm|md|lg|xl|xxl per rendere le colonne responsive. L’esempio seguente mostra come creare quattro colonne di uguale larghezza a partire da tablet e scalare su desktop molto grandi. Su telefoni cellulari o schermi con larghezza inferiore a 576 px, le colonne si impilano automaticamente l’una sull’altra:
L’esempio seguente mostra come creare quattro colonne di uguale larghezza a partire da tablet e scalare su desktop molto grandi. Su telefoni cellulari o schermi con larghezza inferiore a 576 px, le colonne si impilano automaticamente l’una sull’altra:
Scrivi un commento