Bootstrap Grid System
Bootstrap's système de grille permet jusqu'à 12 colonnes à travers la page.
Si vous ne souhaitez pas utiliser toutes les 12 colonnes individuellement, vous pouvez grouper les colonnes ensemble pour créer des colonnes plus larges:
| durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 |
| durée 4 | durée 4 | durée 4 | |||||||||
| durée 4 | durée 8 | ||||||||||
| durée 6 | durée 6 | ||||||||||
| durée 12 | |||||||||||
Bootstrap's système de grille est sensible, et les colonnes se réarranger automatiquement en fonction de la taille de l' écran.
Classes de grille
Le Bootstrap système de grille comporte quatre classes:
- xs (pour les téléphones)
- sm (pour les tablettes)
- md (pour les ordinateurs de bureau)
- lg (pour les grands postes de travail)
Les classes ci-dessus peuvent être combinés pour créer des présentations plus dynamiques et flexibles.
Structure de base d'un Bootstrap Grille
Ce qui suit est une structure de base d'un Bootstrap grille:
<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> Premier; créer une ligne ( <div class="row"> ). Ensuite, ajoutez le nombre souhaité de colonnes (tags avec appropriée .col-*-* les classes). Notez que les chiffres dans .col-*-* doivent toujours ajouter jusqu'à 12 pour chaque ligne.
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 » 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 » Astuce: Vous en apprendrez plus sur Bootstrap grilles plus loin dans ce tutoriel.