Bootstrap - Système de grille

Dans ce chapitre, nous discuterons du système Bootstrap Grid.

Qu'est-ce qu'une grille?

Comme indiqué par wikepedia -

Dans la conception graphique, une grille est une structure (généralement bidimensionnelle) composée d'une série de lignes droites (verticales, horizontales) qui se croisent utilisées pour structurer le contenu. Il est largement utilisé pour concevoir la mise en page et la structure du contenu dans la conception d'impression. Dans la conception Web, c'est une méthode très efficace pour créer rapidement et efficacement une mise en page cohérente en utilisant HTML et CSS.

En termes simples, les grilles de conception Web organisent et structurent le contenu, facilitent l'analyse des sites Web et réduisent la charge cognitive des utilisateurs.

Qu'est-ce que Bootstrap Grid System?

Comme indiqué par la documentation officielle de Bootstrap pour le système de grille -

Bootstrap comprend un premier système de grille fluide mobile et réactif qui s'adapte de manière appropriée jusqu'à 12 colonnes à mesure que la taille de l'appareil ou de la fenêtre augmente. Il comprend des classes prédéfinies pour des options de mise en page faciles, ainsi que des mixins puissants pour générer des mises en page plus sémantiques.

Comprenons la déclaration ci-dessus. Bootstrap 3 est d'abord mobile en ce sens que le code de Bootstrap commence maintenant par cibler des écrans plus petits comme les appareils mobiles, les tablettes, puis «étend» les composants et les grilles pour des écrans plus grands tels que les ordinateurs portables, les ordinateurs de bureau.

Stratégie Mobile First

Content
- Déterminez ce qui est le plus important.
Layout
- Concevez d'abord des largeurs plus petites.
- Adresse CSS de base de l'appareil mobile en premier; adresse de requêtes multimédia pour tablette, ordinateurs de bureau.
Progressive Enhancement
- Ajoutez des éléments à mesure que la taille de l'écran augmente.

Fonctionnement du système de grille Bootstrap

Les systèmes de grille sont utilisés pour créer des mises en page via une série de lignes et de colonnes qui hébergent votre contenu. Voici comment fonctionne le système de grille Bootstrap -

Les lignes doivent être placées dans un .container classe pour un alignement et un rembourrage corrects.
Utilisez des lignes pour créer des groupes horizontaux de colonnes.
Le contenu doit être placé dans les colonnes et seules les colonnes peuvent être les enfants immédiats des lignes.
Classes de grille prédéfinies comme .row and .col-xs-4sont disponibles pour créer rapidement des mises en page de grille. LESS mixins peut également être utilisé pour des mises en page plus sémantiques.
Les colonnes créent des gouttières (espaces entre le contenu des colonnes) via le remplissage. Ce remplissage est décalé en lignes pour la première et la dernière colonne via une marge négative sur.rows.
Les colonnes de la grille sont créées en spécifiant le nombre de douze colonnes disponibles que vous souhaitez couvrir. Par exemple, trois colonnes égales utiliseraient trois.col-xs-4.

Requêtes médias

La requête multimédia est un terme très sophistiqué pour "règle CSS conditionnelle". Il applique simplement du CSS, sur la base de certaines conditions énoncées. Si ces conditions sont remplies, le style est appliqué.

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. Les requêtes multimédias 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.

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

Parfois, ceux-ci sont étendus pour inclure un max-width pour limiter CSS à un ensemble plus restreint d'appareils.

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

Les requêtes multimédias comportent deux parties, une spécification de périphérique, puis une règle de taille. Dans le cas ci-dessus, la règle suivante est définie -

Considérons cette ligne -

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

Pour tous les appareils, quel que soit leur type avec min-width: @ screen-sm-min si la largeur de l'écran devient plus petite que @ screen-sm-max , alors faites quelque chose .

Options de grille

Le tableau suivant résume les aspects du fonctionnement du système de grille Bootstrap sur plusieurs appareils -

	Appareils très petits Téléphones (<768px)	Petits appareils Tablettes (≥768px)	Ordinateurs de bureau moyens (≥992px)	Ordinateurs de bureau de gros appareils (≥1200px)
Comportement de la grille	Horizontal à tout moment	Réduit au début, horizontal au-dessus des points d'arrêt	Réduit au début, horizontal au-dessus des points d'arrêt	Réduit au début, horizontal au-dessus des points d'arrêt
Largeur maximale du conteneur	Aucun (auto)	750 px	970 px	1170px
Préfixe de classe	.col-xs-	.col-sm-	.col-md-	.col-lg-
# de colonnes	12	12	12	12
Largeur max de colonne	Auto	60px	78 px	95px
Largeur de gouttière	30px (15px de chaque côté d'une colonne)	30px (15px de chaque côté d'une colonne)	30px (15px de chaque côté d'une colonne)	30px (15px de chaque côté d'une colonne)
Emboîtable	Oui	Oui	Oui	Oui
Décalages	Oui	Oui	Oui	Oui
Ordre des colonnes	Oui	Oui	Oui	Oui

Structure de grille de base

Voici la structure de base de la grille Bootstrap -

<div class = "container">

   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">...</div>
	
</div>

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

Voyons quelques exemples de grille simples -

Exemple - Empilé à horizontal
Exemple - Appareil moyen et grand
Exemple - Mobile, tablette, ordinateurs de bureau

Réinitialisations réactives de la colonne

Avec les quatre niveaux de grilles disponibles, vous êtes obligé de rencontrer des problèmes où, à certains points d'arrêt, les colonnes ne se dégagent pas tout à fait correctement car l'une est plus grande que l'autre. Pour résoudre ce problème, utilisez une combinaison d'une classe.clearfixet les classes d'utilitaires réactives comme indiqué dans l'exemple suivant -

<div class = "container">
   <div class = "row" >
   
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.</p>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut.</p>
      </div>

      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim</p>
      </div>
      
   </div>
</div>

Cela produira le résultat suivant -

Redimensionnez votre fenêtre d'affichage ou consultez-la sur votre téléphone pour obtenir le résultat souhaité de cet exemple.

Colonnes décalées

Les décalages sont une fonctionnalité utile pour les mises en page plus spécialisées. Ils peuvent être utilisés pour pousser les colonnes pour plus d'espacement (par exemple). le.col-xs = * Les classes ne prennent pas en charge les décalages, mais elles sont facilement répliquées en utilisant une cellule vide.

Pour utiliser des décalages sur de grands écrans, utilisez le .col-md-offset-*Des classes. Ces classes augmentent la marge gauche d'une colonne de* colonnes où * plage de 1 à 11.

Dans l'exemple suivant, nous avons <div class = "col-md-6"> .. </div>, nous allons centrer cela en utilisant la classe .col-md-offset-3.

<div class = "container">

   <h1>Hello, world!</h1>

   <div class = "row" >
      <div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

   </div>
	
</div>

Cela produira le résultat suivant -

Colonnes imbriquées

Pour imbriquer votre contenu avec la grille par défaut, ajoutez un nouveau .row et ensemble de .col-md-* colonnes dans un .col-md-*colonne. Les lignes imbriquées doivent inclure un ensemble de colonnes qui totalisent 12.

Dans l'exemple suivant, la mise en page comporte deux colonnes, la seconde étant divisée en quatre cases sur deux lignes.

<div class = "container">
   <h1>Hello, world!</h1>

   <div class = "row">

      <div class = "col-md-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>First Column</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class = "col-md-9" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>Second Column- Split into 4 boxes</h4>
         <div class = "row">
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Consectetur art party Tonx culpa semiotics. 
                  Pinterest assumenda minim organic quis.</p>
            </div>
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
         </div>

         <div class = "row">
			
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>quis nostrud exercitation ullamco laboris nisi ut aliquip 
                  ex ea commodo consequat.</p>
            </div>   
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
				
         </div>

      </div>

   </div>
	
</div>

Cela produira le résultat suivant -

Ordre des colonnes

Une autre fonctionnalité intéressante du système de grille Bootstrap est que vous pouvez facilement écrire les colonnes dans un ordre et les afficher dans un autre. Vous pouvez facilement modifier l'ordre des colonnes de grille intégrées avec.col-md-push-* et .col-md-pull-* classes de modificateurs où * plage de 1 à 11.

Dans l'exemple suivant, nous avons une disposition en deux colonnes, la colonne de gauche étant la plus étroite et faisant office de barre latérale. Nous échangerons l'ordre de ces colonnes en utilisant.col-md-push-* et .col-md-pull-* Des classes.

<div class = "container">
   <h1>Hello, world!</h1>
   
   <div class = "row">
      <p>Before Ordering</p>
      
      <div class = "col-md-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on left
      </div>
      
      <div class = "col-md-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on right
      </div>
      
   </div>
	
   <br>
   
   <div class = "row">
      <p>After Ordering</p>
      
      <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on left
      </div>
      
      <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on right
      </div>
		
   </div>

</div>

Cela produira le résultat suivant -