Esempi di griglia Bootstrap
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. Sui telefoni cellulari, 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>
Tre colonne disuguali
L'esempio seguente mostra come ottenere tre colonne di larghezza diversa a partire da tablet e scalare su desktop di grandi dimensioni:
Esempio
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</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>
Niente grondaie
Usa la .row-no-guttersclasse per rimuovere le grondaie da una riga e dalle sue colonne:
Esempio
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Due colonne con due colonne annidate
L'esempio seguente mostra come ottenere due colonne partendo da tablet e scalando su desktop di grandi dimensioni, con altre due colonne (larghezze uguali) all'interno della colonna più grande (nei telefoni cellulari, queste colonne e le relative colonne nidificate verranno impilate):
Esempio
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Misti: dispositivi mobili e desktop
Il sistema di griglia Bootstrap ha quattro classi: xs (telefoni), sm (tablet), md (desktop) e lg (desktop più grandi). Le classi 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.
Esempio
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Suggerimento: ricorda che le colonne della griglia dovrebbero sommare fino a dodici per riga. Inoltre, le colonne si accumuleranno indipendentemente dal viewport.
Misti: dispositivi mobili, tablet e desktop
Esempio
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Cancella galleggianti
Cancella i float (con la .clearfixclasse) in punti di interruzione specifici per evitare uno strano avvolgimento con contenuto irregolare:
Esempio
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Colonne di compensazione
Sposta le colonne a destra usando le .col-md-offset-*classi. Queste classi aumentano il margine sinistro di una colonna di * colonne:
Esempio
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
Spingi e tira - Modifica l'ordine delle colonne
Modifica l'ordine delle colonne della griglia con .col-md-push-*e
.col-md-pull-*classi:
Esempio
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>