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 " Tre colonne disuguali
L'esempio seguente mostra come ottenere una tre diverse colonne di larghezza a partire da compresse e di scala a grandi desktop:
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> 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 " Due Colonne con due colonne nidificati
L'esempio seguente mostra come ottenere due colonne a partire da compresse e scalare a grandi tavoli, con altre due colonne (larghezze uguali) all'interno della colonna più grande (a telefoni cellulari, le colonne e le loro colonne annidate saranno impilare):
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> Prova tu stesso " Mixed: mobili e desktop
Il Bootstrap sistema di griglia ha quattro classi: xs (telefoni), sm (compresse), md (desktop), e lg (desktop più grandi). Le classi possono essere combinati per creare layout più dinamici e flessibili.
Suggerimento: Ogni classe scale up, quindi se si desidera impostare le stesse larghezze per xs e sm , avete solo bisogno di 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> Prova tu stesso " Suggerimento: Ricordare che le colonne della griglia dovrebbe aggiungere fino a dodici per una riga. Più di questo, le colonne saranno impilare non importa la viewport .
Misto: mobile, 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-8</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> Prova tu stesso " Cancella Galleggianti
Cancella carri (con il .clearfix classe) presso i punti di interruzione specifici per prevenire strano che sposta con contenuti 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> Prova tu stesso " Colonne compensazione
Spostare colonne a destra utilizzando .col-md-offset-* classi. Queste classi aumentano il margine sinistro di una colonna * 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">
.col-sm-5 .col-sm-offset-2 .col-md-6
.col-md-offset-0</div>
</div> Prova tu stesso " Spingere e tirare - Variazione Colonna Ordinamento
Cambiare 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> Prova tu stesso "