Bootstrap 4 griglie
Sistema a griglia Bootstrap 4
Il sistema a griglia di Bootstrap è costruito con flexbox e consente fino a 12 colonne nella pagina.
Se non desideri utilizzare tutte e 12 le colonne singolarmente, puoi raggruppare le colonne insieme per creare colonne più larghe:
| intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 |
| intervallo 4 | intervallo 4 | intervallo 4 | |||||||||
| intervallo 4 | intervallo 8 | ||||||||||
| intervallo 6 | intervallo 6 | ||||||||||
| intervallo 12 | |||||||||||
Il sistema a griglia è reattivo 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 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.
Struttura di base di una griglia Bootstrap 4
Quella che segue è una struttura di base di una griglia Bootstrap 4:
<!-- 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>
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 sommare fino a 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.
Di seguito abbiamo raccolto alcuni esempi di layout di base della griglia di Bootstrap 4.
Tre colonne uguali
L'esempio seguente mostra come creare tre colonne di uguale larghezza, su tutti i dispositivi e larghezze dello schermo:
Esempio
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Colonne reattive
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 pixel, le colonne si impilano automaticamente l'una sull'altra :
Esempio
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Due colonne reattive disuguali
L'esempio seguente mostra come ottenere due colonne di larghezza diversa a partire da tablet e scalare su desktop extra di grandi dimensioni:
Esempio
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Suggerimento: imparerai di più sulle griglie Bootstrap 4 più avanti in questo tutorial.