Sistema a griglia 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 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 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.
Suggerimento: ricorda che le colonne della griglia dovrebbero sommare fino a dodici per riga. Inoltre, le colonne si accumuleranno indipendentemente dal viewport.
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.
Suggerimento: ogni classe aumenta, quindi se desideri impostare le stesse larghezze per xs e sm, devi solo specificare xs.
Regole del sistema a griglia
Alcune regole del sistema di griglia Bootstrap:
- 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
.rowe.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
Struttura di base di una griglia Bootstrap
Quella che segue è una struttura di base di una griglia Bootstrap:
<div class="container">
<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>
</div>
Quindi, per creare il layout che desideri, crea un contenitore ( <div
class="container">). Quindi, crea 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.
Opzioni griglia
La tabella seguente riassume il funzionamento del sistema a griglia Bootstrap su più dispositivi:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Esempi
I capitoli successivi mostrano esempi di sistemi di rete per diversi dispositivi:
- Accatastati in orizzontale
- Piccoli dispositivi
- Dispositivi medi
- Dispositivi di grandi dimensioni
- Altri esempi di griglia