Griglie Bootstrap
Sistema a griglia Bootstrap
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 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 di Bootstrap è reattivo e le colonne si riorganizzeranno automaticamente a seconda delle dimensioni dello schermo.
Classi griglia
Il sistema di griglia Bootstrap ha quattro classi:
xs(per telefoni - schermi con larghezza inferiore a 768px)sm(per tablet - schermi uguali o superiori a 768px di larghezza)md(per laptop di piccole dimensioni - schermi uguali o superiori a 992px di larghezza)lg(per laptop e desktop - schermi uguali o superiori a 1200px di larghezza)
Le classi sopra possono essere combinate per creare layout più dinamici e flessibili.
Struttura di base di una griglia Bootstrap
Quella che segue è una struttura di base di una griglia Bootstrap:
<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>
<div class="row">
...
</div>
Primo; creare una riga ( <div
class="row">). Quindi, aggiungi il numero desiderato di colonne (tag con
.col-*-*classi appropriate). Nota che i numeri .col-*-*devono sempre sommare fino a 12 per ogni riga.
Di seguito abbiamo raccolto alcuni esempi di layout di griglia Bootstrap di base.
Tre colonne uguali
L'esempio seguente mostra come ottenere tre colonne di uguale larghezza a partire da tablet e scalare su desktop di grandi dimensioni. Su telefoni cellulari o schermi con larghezza inferiore a 768 px, le colonne si accumuleranno automaticamente:
Esempio
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Due colonne disuguali
L'esempio seguente mostra come ottenere due colonne di larghezza diversa a partire da tablet e scalare su desktop 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 più avanti in questo tutorial.