Ci - dessous , nous avons recueilli quelques exemples de base Bootstrap dispositions de la grille.
Trois colonnes de l'égalité
L'exemple suivant montre comment obtenir un trois colonnes de largeur égale à partir de comprimés et de mise à l'échelle de grands postes de travail. Sur les téléphones mobiles, les colonnes seront automatiquement empiler:
Exemple
<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> Essayez - le vous - même » Trois Colonnes Unequal
L'exemple suivant montre comment obtenir un trois différentes largeur des colonnes à partir de comprimés et de mise à l'échelle de grands postes de travail:
Exemple
<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> Essayez - le vous - même » Deux colonnes Unequal
L'exemple suivant montre comment obtenir deux colonnes différentes de largeur à partir de comprimés et de mise à l'échelle de grands postes de travail:
Exemple
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> Essayez - le vous - même » Deux colonnes avec deux colonnes emboîtées
L'exemple suivant montre comment obtenir deux colonnes à partir de comprimés et de mise à l'échelle de grands postes de travail, avec deux autres colonnes (largeurs égales) au sein de la plus grande colonne (à des téléphones mobiles, ces colonnes et leurs colonnes imbriquées seront pile):
Exemple
<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> Essayez - le vous - même » Mixte: mobiles et de bureau
Le Bootstrap système de grille comporte quatre classes: xs (téléphones), sm (comprimés), md (ordinateurs de bureau), et lg (grands postes de travail). Les classes peuvent être combinées pour créer des présentations plus dynamiques et flexibles.
Astuce: Chaque classe échelles, donc si vous souhaitez définir les mêmes largeurs pour xs et sm , vous avez seulement besoin de spécifier xs .
Exemple
<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> Essayez - le vous - même » Astuce: Rappelez - vous que les colonnes de la grille devrait ajouter jusqu'à douze pour une ligne. Plus que cela, les colonnes seront empiler peu importe la viewport .
Mixte: Mobile, Tablette Et Bureau
Exemple
<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> Essayez - le vous - même » Effacer Flotteurs
Flotteurs clairs (avec le .clearfix classe) à des points d' arrêt spécifiques pour empêcher l' emballage étrange avec un contenu inégal:
Exemple
<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> Essayez - le vous - même » Colonnes Compenser
Déplacer les colonnes à droite en utilisant .col-md-offset-* classes. Ces classes augmentent la marge de gauche d'une colonne par * colonnes:
Exemple
<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> Essayez - le vous - même » Pousser et tirer - Changer la colonne Commande
Changer l'ordre des colonnes de la grille avec .col-md-push-* et .col-md-pull-* classes:
Exemple
<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> Essayez - le vous - même »