Grilles
Chantier
Cette page est en chantier.
Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).
Usage
Utiliser un système de grille (une série de rangées et de colonnes qui hébergent du contenu) afin de créer de la mise en page.
Conception et codage
Utilisation de base
Options de grilles souples
Utilisez un système de grilles afin de créer un système de grille souple, fluide et mobile d'abord. Il met à l'échelle jusqu'à 12 colonnes environ, au fur et à mesure que la taille de l'appareil ou de la fenêtre d'affichage augmente.
- Placez les rangées dans
.container
(largeur fixe) ou.container-fluid
(pleine largeur) pour un alignement et un remplissage appropriés - Utilisez des rangées pour créer des groupes de colonnes horizontales
- Placez le contenu dans les colonnes
- Seules les colonnes peuvent être des enfants immédiats de rangées
- Les colonnes créent des gouttières (un espacement entre les colonnes) par
padding:
de CSS. Ce remplissage est souvent décalé dans les rangées pour la première et dernière colonnes à l'aide d'un marge négative sur.row
- Précisez le nombre à étendre (parmi 12 colonnes disponibles) afin de créer des colonnes de grille. Par exemple, pour trois colonnes égales utilisez trois
.col-xs-4
- Les catégories de grilles s'appliquent aux appareils ayant des largeurs supérieures ou égales aux tailles de point d'interruption et remplacent les catégories de grille ciblant des appareils plus petits
- L'application de toute catégorie
.col-md-
à un élément a une incidence sur la stylisation sur les appareils moyens ainsi que sur les grands si une catégorie.col-lg-
ne s'y trouve pas
- Créez des mises en page entièrement fluides (le site Web s'étend sur toute la largeur de la fenêtre d'affichage)
- Pour ce faire, enveloppez le contenu de la grille dans un élément du conteneur avec
padding: 0 15px;
afin de décalermargin: 0 -15px;
sur.row
- Pour ce faire, enveloppez le contenu de la grille dans un élément du conteneur avec
Téléphones – appareils très petits (<768 px) | Tablettes – appareils petits (=768 px) | Ordinateurs de bureau – appareils de taille moyenne (=992 px) | Ordinateurs de bureau – grands appareils (=1200 px) | |
---|---|---|---|---|
Comportement de grille | Horizontal en tout temps | Réduit pour commencer et horizontal au-dessus des points d'interruption | ||
Largeur des conteneurs | Aucune (automatique) | 750px | 970px | 1170px |
Préfixe de catégorie | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
Nombre de colonnes | 12 | |||
Largeur de la colonne | Automatique | 60px | 78px | 95px |
Largeur de la gouttière | 30px (15px sur chaque côté d'une colonne) | |||
Emboîtable | Oui | |||
Décalages | Oui | |||
Ordonnancement des colonnes | Oui |
Rangée d'une grille de base
Utilisez un seul ensemble de catégories de grille .col-md-*
afin de créer un système de grille de base qui commence empilé sur les appareils mobiles et les tablettes (de taille très petite à petite). Il commence ensuite horizontal sur des appareils d'ordinateur de bureau (moyen). Placez des colonnes de grille dans n'importe quelle rangée .row
.
Apparence
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
Code
<div class="row">
<div class="col-md-2">
...
</div>
<div class="col-md-2">
...
</div>
<div class="col-md-2">
...
</div>
<div class="col-md-2">
...
</div>
<div class="col-md-2">
...
</div>
<div class="col-md-2">
...
</div>
</div>
<div class="row">
<div class="col-md-8">
...
</div>
<div class="col-md-4">
...
</div>
</div>
<div class="row">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
</div>
Conteneur fluide
Utilisez pour transformer n'importe quelle mise en page de grille à largeur fixe en mise en page de pleine largeur. Changez le .container
le plus à l'extérieur pour .container-fluid
.
Code
<div class="container-fluid">
<div class="row">
...
</div>
</div>
Utilisation améliorée
Appareils mobiles et ordinateurs de bureau
Utilisez-le pour empêcher les colonnes de simplement s'empiler dans des appareils plus petits. Utilisez les catégories de grille d'appareils très petits et moyens. Ajoutez .col-xs-*
.col-md-*
aux colonnes. Reportez-vous à l'exemple ci-dessous pour avoir une meilleure idée de son fonctionnement.
Apparence
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Code
<!-- Empiler les colonnes sur un appareil mobile en faisant une pleine largeur et l'autre, une demi-largeur -->
<div class="row">
<div class="col-xs-12 col-md-8">...</div>
<div class="col-xs-6 col-md-4">...</div>
</div>
<!-- Les colonnes commencent à 50 % de largeur sur les appareils mobiles et montent jusqu'à une largeur de 33,3 % sur les appareils de bureau -->
<div class="row">
<div class="col-xs-6 col-md-4">...</div>
<div class="col-xs-6 col-md-4">...</div>
<div class="col-xs-6 col-md-4">...</div>
</div>
<!-- Les colonnes ont toujours une largeur de 50 % sur les appareils mobiles et les ordinateurs de bureau -->
<div class="row">
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
</div>
Appareils mobiles, tablettes et ordinateurs de bureau
Utilisez pour créer des mises en page encore plus dynamiques et puissantes avec des catégories .col-sm-*
de tablette.
Apparence
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Code
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
...
</div>
<div class="col-xs-6 col-md-4">
...
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">
...
</div>
<div class="col-xs-6 col-sm-4">
...
</div>
<!-- facultatif : effacez les colonnes XS si leur contenu n'est pas de la même hauteur -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">
...
</div>
</div>
Réinitialisation de colonnes souples
Utilisez pour forcer des points d'interruption dans le contenu. Avec les quatre niveaux de grille disponibles, des problèmes peuvent survenir. À certains points d'interruption, les colonnes ne s'effacent pas toujours convenablement, par exemple, si une colonne est plus haute que l'autre. Pour corriger ce problème, utilisez une combinaison de .clearfix
et de catégories invisibles et visibles.
Apparence
.col-xs-6 .col-sm-3
Redimensionnez la fenêtre d'affichage ou vérifiez-la sur un téléphone cellulaire par exemple.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
Code
<div class="row">
<div class="col-xs-6 col-sm-3">
...
</div>
<div class="col-xs-6 col-sm-3">
...
</div>
<!-- Ajoutez une autre fonction d'effacement total pour seulement la fenêtre d'affichage requis -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">
...
</div>
<div class="col-xs-6 col-sm-3">
...
</div>
</div>
Réinitialisation des décalages, pousser (pushes) et tirer (pulls)
Utilisez la réinitialisation des décalages, de pousser et de tirer en plus de l'effacement de colonne aux points d'interruption souples. La réinitialisation est disponible pour les niveaux de grille moyenne et grande seulement puisqu'ils commencent au niveau de petite grille (deuxième niveau). Reportez-vous à l'exemple de grille.
<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>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
↦ Décaler des colonnes
Utilisez pour déplacer les colonnes à droite avec la catégorie .col-md-offset-*
. Ces catégories augmentent la marge de gauche d'une colonne par les colonnes *
. Par exemple, .col-md-offset-4
déplace .col-md-4
sur quatre colonnes.
Apparence
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
Code
<div class="row">
<div class="col-md-4">
...
</div>
<div class="col-md-4 col-md-offset-4">
...
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">
...
</div>
<div class="col-md-3 col-md-offset-3">
...
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
...
</div>
</div>
Imbrication de colonnes
Utilisez pour imbriquer le contenu avec la grille par défaut. Ajoutez une nouvelle .row
et un ensemble de colonnes .col-md-*
dans la colonne .col-md-*
existante. Les colonnes imbriquées devraient inclure un ensemble de colonnes qui s'accumulent jusqu'à 12.
Apparence
Niveau 1 : .col-md-9
.col-md-6
.col-md-6
Code
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
</div>
</div>
</div>
↹ Ordonnancement de colonnes
Utilisez-le pour facilement changer l'ordre des colonnes de grille intégrées par les catégories de modificateur .col-md-push-*
et .col-md-pull-*
.
Apparence
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
Code
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
Fonctions complémentaires
Des fonctions et des comportements complémentaires sont disponibles.
Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe).
- Date de modification: