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 en fonction de la taille de l' écran: Sur un grand écran , il pourrait regarder mieux avec le contenu organisé en trois colonnes, mais sur un petit écran , il serait préférable que les éléments de contenu ont été empilés au-dessus de l'autre.
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 .
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.
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 .
Règles système __gVirt_NP_NN_NNPS<__ Grille
Certains Bootstrap règles du système de grille:
- Les lignes doivent être placées dans un
.container(-largeur fixe) ou.container-fluid(pleine largeur) pour l' alignement et le rembourrage approprié - Utilisez les lignes pour créer des groupes horizontaux de colonnes
- Le contenu devrait être placé à l'intérieur des colonnes, et seules les colonnes peuvent être des enfants immédiats de lignes
- Classes prédéfinies comme
.rowet.col-sm-4sont disponibles pour faire rapidement mises en réseau - Colonnes créent des gouttières (lacunes entre le contenu de la colonne) par l'intermédiaire de rembourrage. Ce rembourrage est compensé en rangées pour la première et la dernière colonne par marge négative sur
.rows - colonnes de grille sont créées en spécifiant le nombre de 12 colonnes disponibles que vous souhaitez étendre. Par exemple, trois colonnes égales utiliseraient trois
.col-sm-4
Structure de base d'un Bootstrap Grille
Ce qui suit est une structure de base d'un Bootstrap grille:
<div class="container">
<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>
</div> Donc, pour créer la mise en page que vous voulez, créer un conteneur ( <div class="container"> ). Ensuite, 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.
Options de grille
Le tableau suivant résume la façon dont le Bootstrap système de grille fonctionne sur plusieurs appareils:
| Extra small devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Exemples
Les chapitres suivants montrent des exemples de systèmes de grille pour différents appareils: