contact@bootstrap-top-design.com

3 étapes simples pour maitriser une fois pour de bon l’utilisation du système de grille de Bootstrap

système de grille de Bootstrap

Voulez-vous connaitre le système de grille de Bootstrap et savoir à quoi sert-il ? Cherchez-vous à maitriser parfaitement son utilisation ?

Si vous avez répondu oui à l’une de ces deux questions, alors cet article est écrit pour vous. Car une fois que vous aurez terminé la lecture de ce tutoriel, vous connaitrez la grille de Bootstrap, à quoi sert-elle et le plus important  vous passerez maitre dans l’utilisation de la grille de Bootstrap.

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

La sortie du système de grille de Bootstrap fut une révolution dans l’écosystème du développement web.

Les développeurs de Bootstrap l’ont sortie à une époque où les appareils de petite taille prenaient de l’ampleur et commençaient à être utilisés majoritairement pour l’accès à internet.

Quel est le lien entre ce système de grille et les appareils de petite taille ?

Vu que pour accéder à internet les utilisateurs commençaient par avoir une préférence pour ces appareils mobiles, il fallait un outil capable d’adapter les pages web à ces derniers.

C’est ainsi, Bootstrap fut la première à proposer comme solution le système de grille dans sa troisième version sortie le 19 août 2013.

La grille est un système qui permet d’organiser les éléments sur une page web de telle enseigne que ces éléments s’adaptent automatiquement à tout type d’écran : ces pages web s’appellent des pages responsives.

Maintenant, vous allez découvrir en trois étapes comment réaliser une grille Bootstrap.

PS : Dans la suite, je vous donne à chaque fois un exemple illustratif à chaque section pour votre bonne compréhension. Et  pour que les comportements définis dans les codes sources puissent être bien remarqués, je les ai appliqués une bordure et une marge interne.

Première Etape : Définissez le point de départ de votre grille Bootstrap 

point de départ d'une grille bootstrap

Pour réaliser la grille de Bootstrap il vous faut au préalable définir un conteneur dans lequel les éléments seront imbriqués. Bootstrap met à votre disposition deux classes pour définir un conteneur : la classe .container et la classe .container-fluid.

La différence entre ces deux classes est que la classe .container-fluid occupe toute la largeur de la page alors que la classe .container est centrée au milieu de la page.

Exemple 1 :

<div class="container">
	<p>Je suis le conteneur centré au milieu de la page, celui qui est <b>conçu à l'aide la classe .container</b></p>
</div>
<div class="container-fluid">
	<p>Je suis le conteneur qui occupe toute la largeur de la page, celui qui est <b>conçu à l'aide la classe .container-fluid</b></p>
</div>
Démo de l’exemple 1



Maintenant, que vous savez définir le conteneur d’une grille, il est  temps que vous sachiez comment y imbriquer les éléments pour qu’ils s’adaptent automatiquement à tous les supports.

Deuxième étape : Intégrez le système de colonnage de Bootstrap dans le conteneur :

colonnage à l'interieur d'une grille Bootstrap

Après avoir définit le point de départ, il faut maintenant spécifier à la grille la manière dont les éléments doivent être agencés.

Retenez ceci pour la suite : le système de grille de Bootstrap est composé de 12 colonnes.

Il vous faut maintenant créer une ligne à l’intérieur du conteneur, ensuite à l’intérieur de cette ligne, créer les différentes colonnes, ce sont ces dernières qui vont réceptionner les éléments à mettre en page.

Vous n’avez pas compris !

Ne vous inquiétez pas, vous allez bientôt tout comprendre à l’aide d’un exemple simple et concis.

Mais il faut avant l’exemple que je vous apprenne d’abord les classes de Bootstrap permettant de définir une ligne et une colonne.

  • La classe permettant de créer une ligne est la classe .row.
  • Et la classe permettant de créer une colonne est la classe .col

Les deux s’utilisent au sein d’une balise div.

Comme je vous le signifiais dans un précédent paragraphe, la grille est composée de 12 colonnes. Du coup quand vous créez une colonne, il faut lui définir une taille comprise entre 1 et 12.

Place à la pratique

Exemple 2 : Notre Première grille :

<div class="container">
	<div class="row">
		<div class="col-12">
			Voici la première grille de ce tutoriel
		</div>
	</div>
</div>
Démo de l’exemple 2



Nous venons de concevoir une grille d’une ligne et d’une colonne, nous pouvons faire mieux que ça, mais avant voici une petite explication.

Quel qu’en soit le nombre des colonnes définies au sein d’une ligne, il faut que la somme de leur taille fasse 12.

Au cas où la somme des tailles des colonnes dépasse 12, la dernière colonne automatiquement passe en dessous des  autres colonnes.

Un autre exemple : Nous allons réaliser une grille avec les instructions suivantes

  • Une ligne comportant trois colonnes
  • La taille de la première colonne sera 2
  • La taille de la seconde sera 6
  • Et la taille de la dernière sera  4.

Exemple 3:

<div class="container">
	<div class="row">
		<div class="col-2">
			Première Colonne
		</div>
		<div class="col-6">
			Seconde Colonne
		</div>
		<div class="col-4">
			Troisième Colonne
		</div>
	</div>
</div>
Démo de l’exemple 3



C’est bon, maintenant nous allons évoluer, ce qui suit est très intéressant.

Troisième étape : Définissez le comportement de votre grille selon le type d’écran d’affichage 

comportement d'une grille bootstrap en fonction des types d'écran

Bootstrap a défini  au préalable différents contextes pour l’utilisation de la grille.

Je vais être plus explicite.

Bootstrap vous permet de travailler avec des tailles de colonnes différentes en fonction des différentes tailles des navigateurs.

Voici les différentes directives à utiliser en fonction des tailles d’écran souhaitées :

ClassesTypes d’écrans d’affichage
.col-classe utilisée pour les écrans inférieurs à 576px
.col-sm- classe utilisée pour les écrans supérieurs ou égaux à 576px
.col-md- classe utilisée pour les écrans supérieurs ou égaux à 768px
.col-lg- classe utilisée pour les écrans supérieurs ou égaux à 992px
.col-xl- classe utilisée pour les écrans supérieurs ou égaux à 1200px

Ces classes sont des directives responsives.

Exemple 4 :

Nous allons créer une grille d’une ligne qui affiche :

  • Sur un écran large 4 colonnes de mêmes tailles
  • Sur un écran de taille moyenne : les 4 colonnes auront les mêmes tailles, mais les 2 premiers doivent repousser les 2 autres en dessous
  • Et sur les écrans  de petite taille, les 4 colonnes auront les mêmes tailles mais chaque colonne doit repousser le suivant en dessous.

Ça serait bien que vous l’essayez chez vous avant de voir le résultat.   

<div class="container">
		<div class="row">
			<div class="col-12 col-md-6 col-lg-3 border">
				<p>Première Colonne</p>
			</div>
			<div class="col-12 col-md-6 col-lg-3 border">
				<p>Deuxième Colonne</p>
			</div>
			<div class="col-12 col-md-6 col-lg-3 border">
				<p>Troisième Colonne</p>
			</div>
			<div class="col-12 col-md-6 col-lg-3 border">
				<p>Quatrième Colonne</p>
			</div>
		</div>
</div>
Démo de l’exemple 4



La partie qui suit est un exercice qui va vous permettre de mettre en pratique tout ce que vous venez d’apprendre.

Du coup s’il le faut, relisez bien du début jusqu’à ce niveau pour bien comprendre le système de grille de Bootstrap avant de passer à l’exercice.

Exercice:

 Créez une grille d’une ligne contenant 3 colonnes qui respectent les indications suivantes :

  1. Ecran Large :
  2. Première colonne : Taille 3
  3. Deuxième colonne : Taille 5
  4. Troisième Colonne : Taille 4
  5. Ecran de taille moyenne :

Les trois colonnes doivent toutes avoir les mêmes tailles

  • Ecran de petite taille :
  • Première colonne : Taille 3
  • Deuxième colonne : Taille 3
  • Troisième Colonne : Taille 6

Si vous pratiquez, vous maîtriserez, pour cela faites l’exercice avant de voir la correction.

Correction:

<div class="container">
	<div class="row">
		<div class="col-3 col-md-4 col-lg-3 border">
			<p>Première Colonne</p>
		</div>
		<div class="col-3 col-md-4 col-lg-5 border">
			<p>Deuxième Colonne</p>
		</div>
		<div class="col-6 col-md-4 col-lg-4 border">
			<p>Troisième Colonne</p>
		</div>
	</div>
</div>
Démo de l’exercice



Ce tutoriel vous a-t-il été bénéfique, si oui alors faites le découvrir à vos amis en le partageant sur les réseaux sociaux par le biais des boutons de partage ci-dessous.

Cliquez sur le lien suivant pour être informé en premier à chaque nouveau tutoriel sur le blog : je veux m’abonner à la newsletter.

Laisser un commentaire