Easy-Micro

LOGICIEL Bootstrap
Grille Bootstrap
Bootstrap permet une organisation spatiale des pages web à l'aide d'une grille composée de colonnes et de lignes

Lignes Bootstrap

La première classe à connaître est row, qui représente une ligne. Les lignes ont la hauteur de leur contenu. Il conviendra donc d'y associer une règle CSS de type : line-height: 40px; pour obtenir un rendu homogène.

Classe CSS Bootstrap pour les lignes

.row {
line-height: 40px;
}

<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
  Votre contenu ici
</div>
</div>
</body>
</html>

Colonnes Bootstrap

Chaque ligne contient au maximum 12 colonnes qui sont une division en pourcentage de la largeur de la fenêtre. On dispose de six niveaux de grille de col-ecran-1 à col-ecran-12

Colonnes empilées

Lorsque la fenêtre diminue ou s'élargit, on peut envisager deux hypothèses : les éléments se redimensionnent en restant positionnés (sans utilisation de breakpoint), ou alors ils s'empilent quand la fenêtre devient plus étroite et se positionnent côte à côte quand elle s'élargit (avec breakpoint). C'est ici qu'interviennent les 6 classes pour les colonnes :

Six points d'arrêt CSS Bootstrap

xs / sm / md / lg / xl / xxl

  • col-* pour les écrans inférieurs à 576px (xs - eXtra Small )
  • col-sm-* pour les écrans supérieurs ou égal à 576px (SMall)
  • col-md-* pour les écrans supérieurs à 768px (MeDium)
  • col-lg-* pour les écrans supérieurs ou égal à 992px (LarGe )
  • col-xl-* pour les écrans supérieurs ou égal à 1200px (eXtra Large)
  • col-xxl-* pour les écrans supérieurs ou égal à 1400px (eXtra eXtra Large)

Toute ces classes ont par défaut un comportement de redimensionnement. Chaque colonne a un padding appelée gutter (gouttière) pour contrôler l'espace qui les séparent.
Source : Getbootstrap.com

Colonnes de largeur égale - Auto-layout columns

Exemple de dispositions de grille qui s'appliquent à chaque appareil et fenêtre de xs à xxl. Ajoutez autant de div avec la class="col" pour chaque point d'arrêt dont vous avez besoin et chaque colonne aura la même largeur. Comme nous n'utilisons pas ici de classes de point d'arrêts (xs, sm, lg...), les colonnes ne s'empileront pas. 
<div class="container">
  <div class="row">
    <div class="col">
     Contenu 1 sur 2
    </div>
    <div class="col">
      Contenu 2 sur 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 sur 3
    </div>
    <div class="col">
      2 sur 3
    </div>
    <div class="col">
      3 sur 3
    </div>
  </div>
</div>
Source : Getbootstrap.com - > Voir exemple Easy-Micro

Modifier la largeur d'une colonne

Si vous modifiez la largeur d'une colonne, les autres colonnes seront redimensionnées automatiquement. 
<div class="col-6">
     div avec une class col-6
</div>

Colonnes de largeur inégale

Pour les grilles identiques, du plus petit des appareils au plus grand, utilisez les classes .col et .col-* Spécifiez une classe numérotée lorsque vous avez besoin d'une colonne de taille particulière; sinon, n'hésitez pas à vous tenir à .col 
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>
 > Voir exemple Easy-Micro

Colonnes avec breakpoint SMall

En utilisant un seul ensemble de classe .col-sm-*, vous pouvez créer un système de grille de base qui s'empile au petit point d'arrêt (sm). 
<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>
 > Voir exemple Easy-Micro

Colonnes avec breakpoint mixte

Utilisez une combinaison de différentes classes pour chaque niveau si ne voulez pas que vos colonnes s'empilent simplement dans certains niveaux de grille. 
<div class="container">
  <!-- Empilez les colonnes sur smartphone en faisant une pleine largeur et l'autre en demi-largeur -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
</div>
 > Voir exemple Easy-Micro

<div class="container">
  <!-- Les colonnes commencent à 50% de largeur sur smartphone et jusqu'à 33,3% de largeur sur ordinateur de bureau -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
</div>
 > Voir exemple Easy-Micro

<div class="container">
  <!-- Les colonnes ont toujours une largeur de 50%, sur mobile et ordinateur de bureau -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>
 > Voir exemple Easy-Micro

Idéalement, ces trois exemples de lignes (row) seront réunies dans une même page HTML.

Pour aller plus loin...


< Page précédente BOOTSTRAP Page suivante >