Les grilles Bootstrap 3

Le système de grilles Bootstrap 3

Le système de grille de Bootstrap 3 permet jusqu'à 12 colonnes sur une page.
Et un nombre infini de lignes.
Le système de grille de Bootstrap 3 est  responsive, et donc les colonnes seront réarranger automatiquement selon la taille de l'écran de l’appareil utilisé pour afficher la page

Les Classes de grille

 Bootstrap 3 comprend des classes de grille prédéfinie pour préparer rapidement des maquettes de grille pour différents types d'appareils comme les téléphones portables, tablettes, ordinateurs portables et ordinateurs de bureau, etc.. 
Vous pouvez utiliser :
Le .col-xs-* classe pour créer des colonnes de grille pour de très petits appareils comme les téléphones cellulaires.
Le .col-sm-* classe pour les appareils de petit écran comme les tablettes.
Le  .col-md-* classe pour les appareils de taille moyenne comme les ordinateurs de bureau.
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

Le tableau ci-dessus montre une chose très importante, en appliquant une  classe à un élément n'affectera pas seulement son style sur les appareils concernés, mais aussi sur les dispositifs ayant un écran de taille supérieures ou égale à cette appareil.
Donc le système de quadrillage Bootstrap 3 a quatre catégories de classes :
xs (pour afficher les colonnes dans les téléphones)
sm (pour afficher les colonnes dans  les tablettes)
md (pour afficher les colonnes dans les ordinateurs de bureau)
lg (pour afficher les colonnes dans les ordinateurs de bureau plus grands)
Les classes avec les catégories ci-dessus peuvent être combinées pour créer des présentations plus dynamiques et flexibles.

Structure de base d'une grille Bootstrap 3

Comment faire pour créer des lignes et colonnes à l'aide de ce système de grille réactive à 12 colonne? 

La réponse est assez simple, dans un premier temps créer un conteneur qui sert d’emballage (wrapper) pour vos lignes et colonnes à l'aide de la classe .container , puis créer des lignes à l'intérieur du conteneur à l'aide de la classe .row , et pour créer des colonnes à l'intérieur de toute lignes vous pouvez utiliser la classe .col-xs-*,.col-sm-*, .col-md-* et .col-lg-*. Les colonnes sont des zone de contenu réelle où nous allons placer notre contenu. Nous allons mettre toutes ces choses en actions concrètes.

Le code qui suit montre une structure de base d'une grille de Bootstrap 3 :

  Copier le code

  <div class="container">
  <div class="row">
    <div class="col-g-12"></div>
  </div>
  <div class="row">
    <div class="col-g-x1"></div>
    <div class="col-g-x2"></div>
    <div class="col-g-x3"></div>
  </div>
  <div class="row">
    ...
  </div>
 </div>

Dans le code ci-dessus :
-          chaque élément <div class="row">  représente une ligne.
-          l’élément <div class="col-g-12"></div> indique que la ligne conteneur est constituée d’une seule colonne d’où le nombre 12, la lettre g représente une des catégories vues en haut (xs, sm, md ou lg).
-          Les éléments <div class="col-g-x1"></div> <div class="col-g-x2"></div> <div class="col-g-x3"></div>  indiquent que la ligne conteneur est divisée en 3 colonnes, x1 x2 et x3 sont des nombres entre 1 et 12 à condition que leur somme doit être égale à 12. On peut mettre jusqu’à 12 colonnes.
Ci-dessous des exemples de schémas de base de Bootstrap 3

Exemple 1 : Trois colonnes égales

 L’exemple qui suit montre un schéma avec 3 colonnes égales qui seront afficher sur l’écran d’une tablette et l’écran d’un ordinateur de bureau , mais sur l’écran d’un téléphone les colonnes seront réarangées automatiquement.

  Copier le code

<div class="container">
	  <div class="row">
	       <div class="col-sm-4">
	  <h2> ceci est une colonne </h2>
	  <p> ceci est un paragraphe </p>
	  </div>
	       <div class="col-sm-4">
	  <h2> ceci est la deuxiéme colonne </h2>
	  <p> ceci est un deuxième paragraphe </p>
	  </div>
	       <div class="col-sm-4">
	  <h2> ceci est la troisième colonne </h2>
	  <p> et voici un autre paragraphe </p>
	  </div>
	  </div>
 </div>
 

Exemple 2 : Deux colonnes inégales

L'exemple suivant montre comment créer deux colonnes de largeur différentes et de mise à l’échelle à partir d’écran de tablette jusqu’à de grands ordinateurs de bureau :

Exemple :      Copier le code

  <div class="row">
    <div class="col-sm-4">une colonne de largeur 4 </div>
    <div class="col-sm-8">une colonne de largeur 8</div>
  </div>

Bootstrap Modèles Emballage particulier

Maintenant nous allons créer des dispositions plus souples qui modifie l'orientation de la colonne selon la taille de la fenêtre d'affichage.
 L'exemple suivant crée une présentation de trois colonnes sur des appareils moyens comme les ordinateurs portables et ordinateurs de bureau, ainsi que sur des tablettes (iPad d'Apple par exemple) en mode paysage, mais sur les petits appareils comme les tablettes en mode portrait ou les téléphones, il se transforme en une disposition à deux colonnes où la troisième colonne se déplace au bas des deux premières colonnes.

Exemple :      Copier le code

<div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-2"><!---Colonne 1--></div>
        <div class="col-sm-9 col-md-8"><!--- Colonne 2--></div>
        <div class="col-sm-12 col-md-2"><!--- Colonne 3--></div>
    </div>
</div>

Comme vous pouvez le constat dans l'exemple ci-dessus la somme des numéros des colonnes petite grille (c.-à-d. col-sm-*) est 3 + 9 + 12 = 24 > 12, de sorte que le troisième élément <div> avec la classe .col-sm-12 qui ajoute les colonnes supplémentaires au-delà de 12 colonnes maximum dans un .row, s'enroule sur une nouvelle ligne comme une seule unité contiguë sur les petits appareils.
De même, vous pouvez créer des mises en page encore plus adaptables pour vos sites et applications à l'aide de la fonctionnalité d'emballage de Bootstrap.
 
Nous allons apprendre beaucoup plus sur les colonnes dans les chapitres à venir.

chapitre précédent     chapitre suivant