twitter-bootstrap-3 => Système de grille

Requêtes médias

Nous utilisons les requêtes multimédias suivantes dans nos fichiers Less pour créer les points d'arrêt clés de notre système de grille.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in 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) { ... }

Nous développons occasionnellement ces requêtes multimédias pour inclure une largeur maximale afin de limiter les CSS à un ensemble de périphériques plus étroit.

@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) { ... }

Options de grille

Qu'est-ce que le système de grille Bootstrap?

Le système de grille Bootstrap fournit un moyen simple et rapide de créer des mises en page de site Web réactives.

Bootstrap 3 inclut des classes de grille prédéfinies pour créer rapidement des dispositions de grille pour différents types de périphériques tels que les téléphones portables, les tablettes, les ordinateurs portables et les ordinateurs de bureau, etc.

Par exemple, vous pouvez utiliser la classe .col-xs- * pour créer des colonnes de grille pour les petits périphériques supplémentaires tels que les téléphones cellulaires, de même que la classe .col-sm- * pour les petits périphériques tels que les tablettes, la classe .col-md- * pour les périphériques de taille moyenne tels que les ordinateurs de bureau et le .col-lg- * pour les grands écrans de bureau.

Le tableau suivant résume certaines des principales caractéristiques du nouveau système de grille

	Petits appareils supplémentairesPhones (<768px)	Petits appareils Tablettes (≥768px)	Ordinateurs de bureau de taille moyenne (≥992px)	Ordinateurs de bureau de grande taille (≥ 1200px)
Comportement de la grille	Horizontal à tout moment
Largeur du conteneur	Aucun (auto)	750px	970px	1170px
Préfixe de classe	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# de colonnes	12	12	12	12
Largeur de colonne	Auto	~ 62px	~ 81px	~ 97px
Largeur de gouttière	30px (15px de chaque côté d'une colonne)
Nestable	Oui
Compensations	Oui
Commande de colonne	Oui

Empilé à horizontal

En utilisant un seul ensemble de classes de grille .col-md-* , vous pouvez créer un système de grille de base qui commence à être empilé sur les périphériques mobiles et les tablettes (gamme réduite à petite) avant de devenir horizontale sur les périphériques de bureau. Placez les colonnes de la grille dans n'importe quel .row .

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Conteneur de fluide

Transformez n'importe quelle disposition de grille à largeur fixe en une disposition pleine largeur en changeant votre .container plus .container en .container-fluid .

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

Mobile et desktop

Vous ne voulez pas que vos colonnes s'empilent simplement dans des appareils plus petits? Utilisez les classes de grille d'appareil supplémentaires petites et moyennes en ajoutant .col-xs-* .col-md-* à vos colonnes. Voir l'exemple ci-dessous pour une meilleure idée de son fonctionnement.

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Mobile, tablette, bureau

Utilisez l'exemple précédent en créant des mises en page encore plus dynamiques et puissantes avec les .col-sm-* tablette.

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Column wrapping

Si plus de 12 colonnes sont placées dans une seule ligne, chaque groupe de colonnes supplémentaires sera, comme une seule unité, placé sur une nouvelle ligne.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

La colonne réactive se réinitialise

Avec les quatre niveaux de grilles disponibles, vous rencontrerez des problèmes où, à certains points d’arrêt, vos colonnes ne sont pas correctes car l’une est plus grande que l’autre. Pour résoudre ce problème, utilisez une combinaison de .clearfix et de nos classes utilitaires responsive.

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

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

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

En plus de la suppression des colonnes aux points d'arrêt sensibles, vous devrez peut-être réinitialiser les décalages, les poussées ou les tirages. Voir ceci en action dans l'exemple de la 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>

Colonnes de compensation

Déplacez les colonnes vers la droite en utilisant les .col-md-offset-* . 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-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Vous pouvez également remplacer les décalages des niveaux de grille inférieurs par les .col-*-offset-0 .

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Colonnes d'imbrication

Pour imbriquer votre contenu avec la grille par défaut, ajoutez un nouveau .row et un ensemble de .col-sm-* dans une .col-sm-* existante .col-sm-* . Les lignes imbriquées doivent inclure un ensemble de colonnes de 12 au maximum (il n'est pas nécessaire d'utiliser les 12 colonnes disponibles).

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Commande de colonne

Changez facilement l'ordre de nos colonnes de grille .col-md-push-* avec les .col-md-push-* de .col-md-push-* et .col-md-pull-* .

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

Moins de mixins et de variables

En plus des classes de grille prédéfinies pour les mises en page rapides, Bootstrap inclut moins de variables et de mixins pour générer rapidement vos propres mises en page simples et sémantiques.

Les variables

Les variables déterminent le nombre de colonnes, la largeur de la gouttière et le point de requête de support auquel commencer les colonnes flottantes. Nous les utilisons pour générer les classes de grille prédéfinies documentées ci-dessus, ainsi que pour les mixins personnalisés répertoriés ci-dessous.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

Les mixins sont utilisés avec les variables de grille pour générer des CSS sémantiques pour des colonnes de grille individuelles.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

twitter-bootstrap-3
Système de grille

Recherche…