twitter-bootstrap
Système de grille

Introduction

Remarques

Requêtes médias

Les requêtes multimédias dans Bootstrap vous permettent de déplacer, d'afficher et de masquer le contenu en fonction de la taille de la fenêtre d'affichage. Les requêtes multimédia suivantes sont utilisées dans les fichiers LESS pour créer les points d'arrêt clés dans le système de grille Bootstrap:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Parfois, ils sont étendus pour inclure une largeur maximale afin de limiter les CSS à un ensemble plus restreint de périphériques:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Niveaux de grille Bootstrap (points d'arrêt)

Outre le concept d' unités de colonne , Bootstrap a différents points d'arrêt ou tailles de grille appelés niveaux. La grille Bootstrap 3 comporte quatre (4) niveaux pour accueillir différentes largeurs d’écran (ou de fenêtre). Les trois niveaux de Bootstrap sont xs , sm , md et lg . Les colonnes de grille de Bootstrap sont identifiées par différentes classes CSS de col-{breakpoint}-{units} .

Chaque niveau de grille englobe une gamme conçue pour s'adapter au mieux aux largeurs d’écran de périphérique standard telles que les ordinateurs de bureau, les ordinateurs portables, les tablettes et les smartphones.

Bootstrap utilise des requêtes média CSS pour créer des points d'arrêt réactifs qui établissent une limite pour chaque taille de grille. Ces tailles de grille vous permettent de modifier la disposition des colonnes pour correspondre au mieux aux différentes largeurs d’écran et aux différents périphériques__, l’essence même du design réactif.

• col-xs-* - pour les plus petites largeurs d'écran comme les smartphones <768 px
• col-sm-* - pour les petits écrans comme les smartphones et les tablettes> = 768 px
• col-md-* - pour les écrans de taille moyenne comme les tablettes et les ordinateurs portables> = 992 px
• col-lg-* - pour les grandes largeurs d'écran telles que les ordinateurs de bureau> = 1200 px

Référence: Système de grille

Même largeur de colonne pour chaque appareil

Pour créer une colonne qui représente toujours 50% de la largeur de la fenêtre d'affichage (sur tous les périphériques), vous pouvez définir col-*-6 pour chaque niveau.

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">..</div>

Cependant, ceci est un balisage supplémentaire inutile, car col-xs-6 signifie 6 unités sur xs et plus. Le plus petit niveau que vous définissez (xs, sm ou md) définit également la taille des plus grandes largeurs d'écran. Pour la même colonne de taille sur tous les niveaux, définissez simplement la largeur de la plus petite fenêtre.

Code plus court:

<div class="col-xs-6">..</div>

Largeur de colonne différente pour chaque périphérique (design réactif)

Les classes col-*-* peuvent être combinées pour contrôler la largeur des colonnes sur différentes tailles de grille.

Par exemple, créez une colonne de largeur 50% au niveau sm et une colonne de largeur 25% au niveau md ...

<div class="col-md-3 col-sm-6">..</div>

Les grilles sm , md et lg seront toutes "empilées" verticalement à des largeurs de fenêtre inférieures à 768 pixels. C'est là que la grille xs s'insère. Les colonnes qui utilisent les classes col-xs- * ne s'empileront pas verticalement et continueront à réduire les plus petits écrans.

Lignes et colonnes bootstrap

Le système de grille de Bootstrap comporte 12 unités appelées colonnes pouvant être utilisées pour mettre en forme le contenu horizontalement dans la fenêtre d'affichage.

La raison d'une grille de 12 unités (au lieu de 10, 16, etc.) est que 12 se divise également en 6 (moitiés), 4 (quarts) et 3 (tiers). Cela facilite grandement l'adaptation à diverses configurations. Les colonnes de grille de Bootstrap sont identifiées par différentes classes CSS de col-{breakpoint}-{units} . En savoir plus sur la largeur de la fenêtre d'affichage et les points d'arrêt (niveaux AKA)

Ainsi, par exemple, col-md-3 représente une colonne qui occupe 3 des 12 unités (ou 25%) sur une fenêtre de largeur moyenne ( md ). Pour utiliser une largeur de colonne dans votre mise en page, utilisez simplement la classe col-{breakpoint}-{units} appropriée dans votre balisage HTML.

<div class="col-{breakpoint}-{units}">

La largeur de la colonne est fluide (pas de largeur fixe), de sorte que les colonnes consomment un pourcentage de leur conteneur.

Unités de colonne dans Bootstrap 3

• col-*-1 : 1 sur 12 (largeur 8.33333333%)
• col-*-2 : 2 sur 12 (largeur 16,66666667%)
• col-*-3 : 3 sur 12 (largeur 25%)
• col-*-4 : 4 of 12 (largeur 33.3333333%)
• col-*-5 : 5 of 12 (largeur 41.66666667%)
• col-*-6 : 6 of 12 (50% largeur)
• col-*-7 : 7 of 12 (largeur 58.33333333%)
• col-*-8 : 8 of 12 (66.66666667% largeur)
• col-*-9 : 9 of 12 (largeur de 75%)
• col-*-10 : 10 of 12 (largeur 83.33333333%)
• col-*-11 : 11 de 12 (largeur 91.66666667%)
• col-*-12 : 12 of 12 (100% largeur)

Demo - Les 12 unités de colonne de Bootstrap

La ligne bootstrap

La classe Bootstrap .row est utilisée pour contenir les colonnes. Les colonnes doivent toujours être placées dans des lignes et les lignes doivent toujours être placées à l'intérieur d'un conteneur ( container ou container-fluid ). La ligne utilise des marges négatives (-15px) pour garantir un espacement correct entre le contenu de la colonne et le bord du navigateur. Les lignes sont utilisées pour regrouper les colonnes horizontalement.

<div class="container">
    <div class="row">
        <!-- one more columns -->
        <div class="col-{breakpoint}-{units}">..</div>
    </div>
</div>

Les colonnes rempliront le .row horizontalement de gauche à droite et envelopperont une nouvelle ligne toutes les 12 unités de colonne. Par conséquent, vous pouvez utiliser .row s pour créer des sauts horizontaux , ou vous pouvez ajouter plus de 12 unités de colonne dans un seul élément .row pour que les colonnes soient enveloppées (ou empilées) verticalement dans la fenêtre.

Lorsque vous utilisez le .row à la colonne (plus de 12 unités dans un .row ), vous devrez utiliser des réinitialisations réactives (ou des correctifs) pour garantir un emballage uniforme du contenu irrégulier des colonnes. Ceci est essentiel lorsque le contenu des colonnes varie en hauteur.

En savoir plus sur les colonnes et les lignes de la grille Bootstrap

Bootstrap 3 problèmes de disposition de la grille fluide?

Bootstrap 3 - ligne imbriquée puis-je ajouter des colonnes à plus de 12?

Explication de la ligne et de la colonne Bootstrap

Comment fonctionne la grille Bootstrap (moyenne)

Conteneurs

Bootstrap nécessite un élément contenant pour envelopper le contenu du site et héberger notre système de grille. Vous pouvez choisir l'un des deux conteneurs à utiliser dans vos projets.

Utilisez la classe .container pour un conteneur à largeur fixe sensible.

<div class="container">
  ...
</div>

Utilisez .container-fluid classe .container-fluid pour un conteneur pleine largeur couvrant toute la largeur de votre fenêtre.

<div class="container-fluid">
  ...
</div>

Remarque: Les conteneurs ne peuvent pas être imbriqués (vous ne pouvez pas placer un conteneur dans un autre conteneur), en raison du padding et d'autres éléments.

Colonnes de compensation

Ces classes augmentent la marge de gauche d'une colonne par * colonnes. Par exemple, .col-md-offset-4 déplace .col-md-4 sur quatre colonnes.

<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 col-lg-offset-4"></div>
</div>
<div class="row">
  <div class="col-lg-5 col-lg-offset-1"></div>
  <div class="col-lg-5 col-lg-offset-1"></div>
</div>

Manipulation de l'ordre des colonnes à l'aide de push and pull

<div class="container content">
    <div class="row">
        <!--Main Content-->
        <div class="col-lg-9 col-lg-push-3">
            Main Content
        </div>
        
        <!--Sidebar-->
        <div class="col-lg-3 col-lg-pull-9">
            Sidebar
        </div>
    </div>
</div>

Cela modifie l'ordre des colonnes de la grille intégrée.

Syntaxe: .col-md-push- * et .col-md-pull- *.

Plus:
Manipulation de l'ordre des colonnes en utilisant col-lg-push et col-lg-pull dans Twitter Bootstrap 3
Bootstrap 3: Colonnes Push / Pull uniquement sur des tailles d’écran plus petites
Commande de colonne et empilement dans Bootstrap 3