Sélection de la langue

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.

Options souples
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

Niveau 2 : .col-md-6
Niveau 2 : .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: