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écaler margin: 0 -15px; sur .row

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-8

.col-md-4

.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

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

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

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

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.

Redistribuer le contenu autour des grilles

Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe).

Date de modification:: 2019-04-11

Sélection de la langue

Recherche et menus

Recherche

Grilles

Chantier

Usage

Conception et codage

Utilisation de base

Options de grilles souples

Rangée d'une grille de base

Apparence

Conteneur fluide

Code

Utilisation améliorée

Appareils mobiles et ordinateurs de bureau

Apparence

Appareils mobiles, tablettes et ordinateurs de bureau

Apparence

Réinitialisation de colonnes souples

Apparence

Réinitialisation des décalages, pousser (pushes) et tirer (pulls)

↦ Décaler des colonnes

Apparence

Imbrication de colonnes

Apparence

↹ Ordonnancement de colonnes

Apparence

Fonctions complémentaires