Bootstrap Grid System
Bootstrap's sistema di rete consente fino a 12 colonne sulla pagina.
Se non si desidera utilizzare tutte le 12 colonne singolarmente, è possibile raggruppare le colonne insieme per creare colonne più ampie:
| Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 |
| arco di 4 | arco di 4 | arco di 4 | |||||||||
| arco di 4 | arco 8 | ||||||||||
| arco di 6 | arco di 6 | ||||||||||
| arco di 12 | |||||||||||
Bootstrap's sistema di griglia è sensibile, e le colonne si ri-organizzare automaticamente in base alle dimensioni dello schermo.
Classi griglia
Il Bootstrap sistema di griglia ha quattro classi:
- xs (per i telefoni)
- sm (per le tavolette)
- md (per desktop)
- lg (per i desktop più grandi)
Le classi sopra possono essere combinati per creare layout più dinamici e flessibili.
Struttura di base di un Bootstrap griglia
Quanto segue è una struttura di base di un Bootstrap griglia:
<div
class="row">
<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, aggiungere il numero desiderato di colonne (tag con adeguate .col-*-* classi). Si noti che i numeri in .col-*-* devono sempre aggiungere fino a 12 per ogni riga.
Qui di seguito abbiamo raccolto alcuni esempi di base Bootstrap layout della griglia.
Tre colonne uguali
L'esempio seguente mostra come ottenere un tre colonne della stessa larghezza a partire da compresse e di scala a grandi tavoli. Sui telefoni cellulari, le colonne saranno impilare 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> Prova tu stesso " Due colonne disuguali
L'esempio seguente mostra come ottenere due colonne diverse larghezza a partire da compresse e scalare a grandi desktop:
Esempio
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> Prova tu stesso " Suggerimento: Si impara di più su Bootstrap griglie più avanti in questo tutorial.