Qu'est-ce que Bootstrap Grid System

Le système de grille Bootstrap fournit le moyen rapide et facile de créer des mises en page d’un site réactif. Contrairement au système de grille précédent de Bootstrap 2.x qui est fixé par défaut, la nouvelle version, c'est-à-dire Bootstrap 3, introduit le premier système de grille fluide mobile réactif qui évalue de manière appropriée jusqu'à 12 colonnes lorsque la taille du dispositif ou de la fenêtre augmente.

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

Par exemple, vous pouvez utiliser la classe .col-xs- * pour créer des colonnes de grille pour des périphériques supplémentaires Comme les téléphones cellulaires, de la même façon que la classe .col-sm- * pour les petits écrans comme les tablettes, la classe .col-md- * pour les appareils de taille moyenne comme les ordinateurs de bureau et le .col-lg- * pour les écrans de bureau de grande taille. Le tableau suivant résume certaines des principales caractéristiques du nouveau système de grille.

Bootstrap twitter prend en charge 4 types de format:

• Très petit format < 768 pixels( Smartphone )
• Petit format ≥ 786 px &  < 992 px( Tablette )
• Moyen format≥ 992 px &  < 1200 px( Petit écran )›
• Large format ≥ 1200 px ( Ecran standard )

Il existe un préfixe pour ces formats:

• Très petit format.col-xs-
• Petit format.col-sm-
• Moyen format.col-md-
• Large format.col-lg-

Maintenant, la question qui se pose comment créer des lignes et des colonnes en utilisant ce système de 12 grilles répondeur. La réponse est assez simple, créer d'abord un conteneur qui agit comme un wrapper pour vos lignes et colonnes à l'aide de la classe .container, puis créer des lignes à l'intérieur du conteneur en utilisant la classe .row et créer des colonnes à l'intérieur de n'importe quelle ligne que vous pouvez utiliser La classe .col-xs- *, .col-sm- *, .col-md- * et .col-lg- *. Les colonnes sont la zone de contenu réelle où nous placerons notre contenu. Mettons toutes ces choses en action réelle.

Création de deux présentations de colonnes :

L'exemple suivant vous montrera comment créer deux configurations de colonnes pour les périphériques de petite, moyenne et grande taille tels que les tables, les ordinateurs portables et les ordinateurs de bureau, etc. Toutefois, sur les téléphones mobiles, les colonnes deviendront automatiquement horizontales par défaut.

<div class="container">

    <!-- Ligne avec deux colonnes égales -->

    <div class="row">

        <div class="col-sm-6"><!—Colonne gauche--></div>

        <div class="col-sm-6"><!—Colonne droite--></div>

    </div>

    <!-- Rangée avec deux colonnes divisées en 1: 2 -->

    <div class="row">

        <div class="col-sm-4"><!—Colonne gauche--></div>

        <div class="col-sm-8"><!—Colonne droite--></div>

    </div>

    <!-- Rangée avec deux colonnes divisées en 1: 3-->

    <div class="row">

        <div class="col-sm-3"><!—Colonne gauche--></div>

        <div class="col-sm-9"><!—Colonne droite--></div>

    </div>

</div>

Puisque le système de grille de Bootstrap est basé sur 12 colonnes, de sorte à garder les colonnes dans une ligne (c.-à-d  côte à côte), la somme des numéros de colonne de grille dans chaque ligne doit être égal à 12. Si vous voyez l'exemple ci-dessus soigneusement vous Trouvera que le nombre de colonnes de la grille (c.-à-d col-sm- *) s'élève à douze (6 + 6, 4 + 8 et 3 + 9) pour chaque rangée.

Création de trois modèles de colonnes :

De même, vous pouvez créer d'autres mises en page basées sur le principe ci-dessus. L'exemple suivant créera généralement trois présentations de colonnes pour les écrans des ordinateurs portables et des postes de travail. Il fonctionne également en mode paysage en mode paysage si la résolution de l'écran est supérieure ou égale à 992 pixels (par exemple, Apple iPad). Cependant, en mode portrait, il sera horizontal comme d'habitude.

<div class="container">

    <!-- Ligne avec trois colonnes égales-->

    <div class="row">

        <div class="col-md-4">< !--Colonne gauche-- ></div>

        <div class="col-md-4"><! --Colonne milieu--></div>

        <div class="col-md-4"><! --Colonne droite-- ></div>

    </div>

    <!-- Ligne avec trois colonnes divisées en 1: 4: 1 ratio -->

    <div class="row">

        <div class="col-md-2"><!-- Colonne gauche --></div>

        <div class="col-md-8"><!-- Colonne milieu --></div>

        <div class="col-md-2"><!-- Colonne droite --></div>

    </div>

    <!-- Ligne avec trois colonnes divisées inégalement -->

    <div class="row">

        <div class="col-md-3"><!-- Colonne gauche --></div>

        <div class="col-md-7"><!-- Colonne milieu --></div>

        <div class="col-md-2"><!-- Colonne droite --></div>

    </div>

</div>

                                                                                                                                                     

Maintenant, nous allons créer des mises en page plus flexibles qui modifient l'orientation de la colonne en fonction de la taille de la fenêtre. L'exemple suivant créera une mise en page à trois colonnes sur des périphériques moyens tels que les ordinateurs portables et les ordinateurs de bureau, ainsi que sur les tablettes (par exemple Apple iPad) en mode paysage, mais sur de petits périphériques comme les tablettes en mode portrait. La troisième colonne se déplace au bas des deux premières colonnes.

<div class="container">

    <div class="row">

        <div class="col-sm-3 col-md-2"><!--Column one--></div>

        <div class="col-sm-9 col-md-8"><!--Column two--></div>

        <div class="col-sm-12 col-md-2"><!--Column three--></div>

    </div>

</div>

Comme vous pouvez le voir dans l'exemple ci-dessus, la somme de petits nombres de colonnes de grille (ie col-sm- *) est 3 + 9 + 12 = 24> 12, donc le troisième élément <div> avec la classe .col-sm-12 Qui consiste à ajouter les colonnes supplémentaires au-delà du maximum de 12 colonnes dans un .row, est enveloppé sur une nouvelle ligne comme une unité contiguë sur de petits périphériques ayant la largeur de fenêtre de vue inférieure à 992 pixels.

De même, vous pouvez créer des mises en page encore plus adaptables pour vos sites Web et vos applications à l'aide de la fonctionnalité d'enveloppe de la grille du Bootstrap. Dans la section suivante, nous discuterons de l'autre aspect de cette fonctionnalité. Voici quelques exemples de grille de bootstrap prêts à utiliser

Tableaux de présentation de deux colonnes : Tablets, ordinateurs de bureau et grands écrans

Voici les exemples de mise en page de deux colonnes pour tablettes (portrait et paysage), ordinateurs de bureau et grands bureaux.

Ces mises en page deviendront horizontales, c'est-à-dire changées en une disposition de colonne sur des appareils mobiles.

Création de configurations multi-colonnes avec Bootstrap 3 Grid System :

Avec le nouveau système de grille mobile Bootstrap 3, vous pouvez facilement contrôler la façon dont la mise en page de votre site sera rendue sur différents types de périphériques qui ont différentes tailles d'écran comme les téléphones cellulaires, tablettes, ordinateurs de bureau, etc.

Dans l'illustration ci-dessus, il ya un total de 12 boîtes de contenu dans tous les dispositifs, mais sa mise en place varie en fonction de la taille de l'écran du dispositif, comme dans le dispositif mobile la mise en page est rendue comme une grille de grille qui a 1 colonne et 12 rangées placées les unes au-dessus des autres, Tandis que dans la tablette, il est rendu comme deux grilles de grille de mise en page qui a 2 colonnes et 6 lignes. En outre, dans les dispositifs de taille d'écran moyens comme les ordinateurs portables et les ordinateurs de bureau, il est rendu comme trois grille de colonne de mise en page qui comme 3 colonnes et 4 lignes et enfin dans les dispositifs grand écran comme les grands bureaux,

Maintenant, la question est de savoir comment nous pouvons créer de telles agencements réactifs en utilisant ce nouveau système Bootstrap première grille mobile. Commençons par le périphérique moyen(col-md )qui peut être un ordinateur portable ou un bureau normal. Étant donné que notre disposition dispositif moyen a 3 colonnes et 4 lignes, c'est-à-dire la mise en page grille 3x4, de sorte que le code HTML pour faire une telle structure grille serait quelque chose comme ça.

  <div class="container">

         <div class="row">

              <div class="col-md-4"><p>Box 1</p></div>

              <div class="col-md-4"><p>Box 2</p></div>

              <div class="col-md-4"><p>Box 3</p></div>

              <div class="col-md-4"><p>Box 4</p></div>

              <div class="col-md-4"><p>Box 5</p></div>

              <div class="col-md-4"><p>Box 6</p></div>

             <div class="col-md-4"><p>Box 7</p></div>

             <div class="col-md-4"><p>Box 8</p></div>

             <div class="col-md-4"><p>Box 9</p></div>

            <div class="col-md-4"><p>Box 10</p></div>

            <div class="col-md-4"><p>Box 11</p></div>

            <div class="col-md-4"><p>Box 12</p></div>

      </div>

 </div>

Si vous voyez la sortie de l'exemple ci-dessus dans un ordinateur portable ou un bureau ayant une largeur d'écran ou de fenêtre supérieure ou égale à 992px et moins de 1200px vous trouverez qu'il a 4 lignes où chaque ligne a 3 colonnes égales résultant en 3x4 grille de mise en page.

Mais il suffit d'attendre, l'exemple ci-dessus a une question d'alignement majeur.

Avec les 3 niveaux de grille disponibles, vous rencontrerez probablement des problèmes lorsque, à certains points d'arrêt, vos colonnes ne s'effacent pas bien, car une colonne est plus grande que l'autre. Pour résoudre ce problème, utilisez un mélange de .clearfix et de nos classes d'utilitaire réactives.

      <div class="container">
           <div class="row">
                 <div class="col-md-4"><p>Box 1</p></div>
                  <div class="col-md-4"><p>Box 2</p></div>
                 <div class="col-md-4"><p>Box 3</p></div>
                <div class="clearfix visible-md-block"></div>
               <div class="col-md-4"><p>Box 4</p></div>
               <div class="col-md-4"><p>Box 5</p></div>
               <div class="col-md-4"><p>Box 6</p></div>
                <div class="clearfix visible-md-block"></div>
                <div class="col-md-4"><p>Box 7</p></div>
                <div class="col-md-4"><p>Box 8</p></div>
                <div class="col-md-4"><p>Box 9</p></div>
                 <div class="clearfix visible-md-block"></div>
                <div class="col-md-4"><p>Box 10</p></div>
               <div class="col-md-4"><p>Box 11</p></div>
                <div class="col-md-4"><p>Box 12</p></div>
            </div>
       </div>

Puisque le système de grille par défaut a 12 colonnes et dans notre somme de présentation du nombre de chaque trois colonnes, c'est-à-dire col-md- * est égal à 12 c'est pourquoi nous avons effacé les colonnes après chaque troisième occurrence. Dans tout autre scénario où les nombres de colonnes sont différents pour chaque colonne, vous devez utiliser .clearfix après la colonne qui fait la grille complète de 12 colonnes

. Il est maintenant temps de personnaliser notre mise en page pour d'autres périphériques. Personnalisez-le d'abord pour la tablette. Depuis l'intérieur de la tablette de notre mise en page rendus en 2x6 grilles (c'est-à-dire 2 colonnes et 6 rangées). Alors, allez-y et ajoutez la classe .col-sm-6 sur chaque colonne.

<div class="container"

         <div class="row">

<div class="col-sm-6 col-md-4"><p>Box 1</p></div>

 <div class="col-sm-6 col-md-4"><p>Box 2</p></div>

<div class="col-sm-6 col-md-4"><p>Box 3</p></div>

 <div class="clearfix visible-md-block"></div>

 <div class="col-sm-6 col-md-4"><p>Box 4</p></div>

 <div class="col-sm-6 col-md-4"><p>Box 5</p></div>

 <div class="col-sm-6 col-md-4"><p>Box 6</p></div>

  <div class="clearfix visible-md-block"></div>

 <div class="col-sm-6 col-md-4"><p>Box 7</p></div>

 <div class="col-sm-6 col-md-4"><p>Box 8</p></div>

 <div class="col-sm-6 col-md-4"><p>Box 9</p></div>

  <div class="clearfix visible-md-block"></div>

   <div class="col-sm-6 col-md-4"><p>Box 10</p></div>

   <div class="col-sm-6 col-md-4"><p>Box 11</p></div>

   <div class="col-sm-6 col-md-4"><p>Box 12</p></div

</div>

      </div>

</div>

Or, puisque la somme de chaque nombre de deux colonnes, c'est-à-dire col-sm- * est égale à 12, alors flotte après chaque seconde occurrence de colonnes.

Après avoir dégagé les flotteurs pour les petits appareils, notre code final serait:

<div class="container">

   <div class="row">

      <div class="col-sm-6 col-md-4"><p>Box 1</p></div>

      <div class="col-sm-6 col-md-4"><p>Box 2</p></div>

       <div class="clearfix visible-sm-block"></div>

      <div class="col-sm-6 col-md-4"><p>Box 3</p></div>

      <div class="clearfix visible-md-block"></div>

      <div class="col-sm-6 col-md-4"><p>Box 4</p></div>

      <div class="clearfix visible-sm-block"></div>

      <div class="col-sm-6 col-md-4"><p>Box 5</p></div>

      <div class="col-sm-6 col-md-4"><p>Box 6</p></div>

      <div class="clearfix visible-sm-block"></div>

      <div class="clearfix visible-md-block"></div>

      <div class="col-sm-6 col-md-4"><p>Box 7</p></div>

      <div class="col-sm-6 col-md-4"><p>Box 8</p></div>

      <div class="clearfix visible-sm-block"></div>

      <div class="col-sm-6 col-md-4"><p>Box 9</p></div>

      <div class="clearfix visible-md-block"></div>

      <div class="col-sm-6 col-md-4"><p>Box 10</p></div>

      <div class="clearfix visible-sm-block"></div>

      <div class="col-sm-6 col-md-4"><p>Box 11</p></div>

      <div class="col-sm-6 col-md-4"><p>Box 12</p></div>

   </div>

</div>

Décalage de colonnes col-xx-offset-*

Déplacez des colonnes sur la droite avec les classes .col-md-offset-*. Ces classes augmentent la marge à gauche d'une colonne de * colonnes. Par exemple, .col-md-offset-4 déplace .col-md-4 de 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>

Tri de colonnes : col-md-push-* , .col-md-pull-*.

Changez facilement l'ordre de nos colonnes de grille intégrées avec les classes de modificateur .col-md-push-* et .col-md-pull-*. Ces classes permettent de gérer les placements des colonnes dans la grille bootstrap 3

Comme leur nom le suggère, "push" et "pull" consiste respectivement à "pousser" et "tirer". Bien sûr, c'est un peu abstrait dit comme ça, mais c'est ainsi qu'il faut voir les choses. Par exemple, un élément "div" qui aura une classe "push" sera "pousser" vers le côté droit de l'écran et serra "tirer" vers le côté gauche si elle a une classe "pull". Le nombre suffixe vous indiquera après sur combien de colonnes vous souhaitez le décalage.

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

On pousse La colonne col-md-9  vers la côté droite et on tire la colonne col-md-3 vers la gauche
Voir cette vidéo :Comment utiliser le système de grille du Framework BootStrap 3

<<<Précédent                                                Debut                                Suivant>>>