Salut, utiliser la grille bootstrap

Après être resté un peu sur notre faim la semaine dernière, je vais donc te montrer comment utiliser la grille Bootstrap. Nous allons nous servir des dernières classes CSS vues, celles qui ressemble à cela: col-md-5. Si tu ne te rappelles pas comment cette balise est constituée et ce que ça signifie, tu peux jeter un oeil à mon dernier article: Le système de Grille avec Bootstrap.

Petit rappel avant d’aller plus loin, Bootstrap est un framework permettant de créer des pages responsives assez facilement. Il est pensé Mobile First, et c’est exactement ce qu’on va faire. Nous allons travailler la plus petite taille d’écran en premier, et nous verrons les autres ensuite. Les pages sur smartphones sont à mon sens plus compliqués à créer puisque nous allons toujours avoir envi de mettre plein d’informations sur un support qui ne peut pas contenir grand de choses. Il faut donc optimiser un maximum le contenu et veiller à ce qu’il s’affiche correctement.  Si cela s’affiche correctement, sur mobile, ça devrait bien se passer sur desktop, en revanche l’inverse n’est pas toujours le cas. J’ai d’ailleurs eu quelques prises de têtes lors de la fin du projet sur Openclassrooms (Cours HTML5 et CSS3) où il fallait faire une page, puis la rendre responsive avec des Media Queries… Si j’avais connu Bootstrap à l’époque, j’aurais sans doute moins galéré… 2 jours pour trouver 2 erreurs… Ne pas oublier qu’il y a des propriétés par défaut… Bref c’est pas le sujet pour le moment, on verra cela plus tard, revenons à Bootstrap.

Utiliser la grille

Nous allons donc commencer par positionner nos éléments de pages avec  les classes commençant par col-xs, XS étant pour Bootsrap, la définition d’un petit écran.

Il y autre chose qu’il faut avoir en tête, c’est que Bootstrap appliquera toujours la plus petite taille d’écran définie. Il faut toute fois faire attention à quelques détails dont je me suis aperçu.

Comme toujours, tu pourras voir tout les tests abordés dans un projet Codepen créé pour l’occasion, il porte le même titre que l’article, Utiliser la grille Bootstrap.

Construire des blocs pour les petits écrans

Commençons donc par créer les blocs de bases pour mettre en place notre grille:

  • Une div comprenant la classe CSS: container ou container-fluid, 
  • Une div comprenant la classe CSS:  row, pour définir la ligne.
  • Deux div comprenant les classes CSS: col-xs-3 et col-xs-5.

J’ai ajouté des  classes CSS qui correspondent à des couleurs afin de voir comment les blocs se comportent au fil des exemples. J’ai également donné une hauteur de 100px à chaque classe de couleur. Je fais d’ailleurs toujours ce test pour bien vérifier que Bootstrap fonctionne.

	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-3 rouge">
			</div>
			
			<div class="col-xs-5 bleu">
			</div>
		</div>
	</div>

On observe 3 choses:

  • la proportion de bleu et de rouge semble correspond à ce qu’on a demandé: plus de bleu que de rouge pour la faire courte.
  • Il reste un bloc blanc à droite: il correspond à l’espace non exploité. Nous avons la possibilité d’utiliser 12 colonnes, il reste donc la place de 4 colonnes.
  • Lorsqu’on réduit la fenêtre du navigateur, les blocs se réduisent mais la proportion de rouge et de bleu reste la même!
Première conclusion

Tu vois bien ici que la dernière taille d’écran définie est prise en compte et qu’elle s’adapte bien sans casse.

Maintenant remet la taille de la fenêtre à une taille d’ordinateur normale. Dans  le code que tu viens de taper remplace l’instruction xs par  md… Normalement il ne se passe rien, nous avons bien la même répartition de bloc. Mais réduit maintenant la taille de l’écran… Et la c’est le drame!!

La répartition n’est pas respectée et les deux blocs se positionnent l’un au dessus de l’autre… Et ce n’est pas ce que l’on voulait. Bootstrap conserve la dimension des blocs pour un écran de taille « medium », soit 970px de largeur d’écran donc 81px / colonnes. Comme la somme des deux blocs défini (plus le bloc « blanc de droite)  ne rentre pas dans les 750px, taille d’un écran mobile, Bootstrap s’adapte et  les mets automatiquement l’un en dessous de l’autre et les répartis sur la largeur disponible. Si c’est ce que l’on veut c’est super, on a rien d’autre à faire. Dans le cas contraire, il faut modifier ça…

Si l’on souhaite sur mobile avoir le bloc rouge sur toute la largeur, le bloc bleu en dessous prenant aussi toute la largeur, on va écrire le code suivant:

		<div class="row bloc">
			<div class="col-xs-12 rouge">
			</div>
			<div class="col-xs-12 bleu">
			</div>
		</div>

On remarque que cette disposition s’adapte également très bien sur des écrans plus grands. Mais on peut avoir envi que ces deux blocs se comportent différemment sur des écrans plus grand suivant la taille du contenu que l’on mettra dedans. Voyons cela dans la section suivante.

Gérer différente taille d’écrans

Avec Bootstrap il est assez simple de gérer différente taille d’écrans, il est même fait pour ça! Il suffit d’ajouter des classes CSS aux div codées précédemment saisies sans rien supprimer. Tout fonctionne, on ne va quand même pas l’enlever!?

En revanche il vaut mieux savoir ce que l’on veut faire avant, ou au moins avoir une idée du rendu que l’on souhaite afin d’éviter de bricoler et de risquer de casser le code qu’on a tapé jusque là.

Nous avons une ligne, div « row », contenant:

  • une ligne div rouge qui occupe les 12 colonnes sur un écran extra-small,
  • une ligne div bleue qui occupe les 12 colonnes sur un écran extra-small.

Ce que l’on va chercher à faire:

  • la div rouge fera 8 colonnes pour un écran small  (col-sm-8) et 4 colonnes pour un écran medium (col-md-4)
  • la div bleue fera 4 colonnes pour un écran small  (col-sm-4) et 8 colonnes pour un écran medium (col-md-8).

Imagine avant de taper ce que ça va donner…

Prépare ta fenêtre de navigateur pour qu’elle soit de la taille d’un écran de téléphone dans un premier temps…

Nous allons donc modifier le code existant et AJOUTER les classes CSS données juste au dessus:

		<div class="row bloc">
			<div class="col-xs-12 rouge col-sm-8 col-md-4">
			</div>
			<div class="col-xs-12 bleu col-sm-4 col-md-8">
			</div>
		</div>

Ce qu’il se passe:

  • Pour l’écran XS (smartphone):  les 2 blocs sont bien l’un en dessous de l’autre,
  • Pour l’écran SM (tablette): Les 2 blocs sont en lignes et la proportion de rouge est plus importante,
  • Pour l’écran MD et plus (PC): Les 2 blocs sont en lignes et la proportion de bleue est plus importante.

C’est bien ce que l’on voulait!

Mais on peut aller plus loin! Par quoi je commence?

Visible et Hidden

Il y a plusieurs d’autres possibilités mais je vais commencer par celle que je trouve la plus sympa. Bootstrap nous permet de rendre des blocs visibles ou invisibles suivant la taille de l’écran.

Par exemple, sur une page tu as un bloc au sein duquel des photos défilent automatiquement. Cet effet est très sympa sur un grand écran mais peu consommer de la ressource (temps de chargement) et prendre de la place sur un appareil mobile. Bootstrap permet facilement de montrer ou de cacher un élément de la page sans utiliser de Média Queries. Comme d’habitude avec ce framework, il te suffit d’ajouter des classes CSS.

Les classe CSS

Il y a 2 possibilités qui offrent à l’utilisateur le même résultat mais qui fonctionnent de façon différente:

  • VISIBLE: rends le bloc visible uniquement pour la taille d’écran sélectionné. Ex: visible-xs- => ce bloc sera visible uniquement pour les écrans de smartphone, et sur aucun autre.
  • HIDDEN: masque le bloc uniquement pour la taille d’écran sélectionné. Ex: hidden-md- => ce bloc sera masqué uniquement pour les écrans de taille médium, et visible sur les autres.

Tu pourras trouver sur le site de Bootstrap les possibilités de ces 2 propriétés à ce lien, pour bien comprendre le principe.

Pour l’exemple suivant sur Codepen, je vais repartir du code du précédent exemple, et ajouter des classes qui feront apparaître d’autre bloc. Je vais juste modifier le nombre de colonnes occupées précédemment, et les redistribuer.

		<div class="row bloc">
			<div class="col-xs-12 col-sm-3 hidden-lg hidden-md rouge">
			</div>
			<div class="col-xs-12 col-sm-3 col-md-6 bleu">
			</div>
			<div class="col-xs-12 col-sm-3 hidden-md col-lg-2 vert">
			</div>
			<div class="col-xs-12 col-sm-3 col-md-4 jaune">
			</div>
			</div>

Avant d’aller plus loin et de jouer avec la taille de ta fenêtre, je te conseille de lire ce code et d’essayer de comprendre ce qu’il doit faire apparaître?

Pour ma part pour faire cela, je fais un tableau qui ressemble à ça:

utiliser la grille bootstrap

Alors qu’on soit clair je ne le fais jamais dans Excel, normalement c’est un tableau dégueulasse fait avec un bic sur un coin de table, mais là ça fait plus propre… Le fonctionnement est assez simple.

Tu reconnais les tailles d’écran (xs, sm, etc) et les différents blocs représentés par des couleurs dans l’exemple. Les cases en rouges signifie que le bloc n’apparait pas pour cette taille d’écran, le vert indique donc que le bloc apparaît. Les chiffres quant à eux représentent de nombre de colonne de la grille occupée par le bloc.

Pour l’exemple j’ai travaillé un peu à l’envers parce que j’ai écrit le code puis j’ai fait le tableau pour expliquer un peu dans l’article. A l’avenir je ferai le tableau et je coderai ensuite, ce qui permet d’être plus efficace et de ne pas (ou moins) se tromper. Tu peux aussi dessiner la grille, 12 colonnes ou cases par ligne et dessiner directement ce que tu veux obtenir. c’est au choix.

 

Un Wrap s’il vous plait…

Pour les moins anglophones d’entre nous, « wrap » signifie emballer, pense par exemple sans vouloir faire de pub au Mac Wrap de chez MacDo, si tu vois pas arrêtes de prendre des Big Mac ou demande à ta copine, elle sait surement ce que c’est…

Pour Bootstrap, rien à voir évidemment avec de la bouffe, le terme « wrap » exprime le cas où le nombre de colonne dépasse 12 au sein d’une même ligne. Oui c’est possible et dans ce cas Bootstrap renvoi le bloc qui dépasse à la ligne. En réduisant l’écran, les proportions des blocs restent les mêmes jusqu’à la taille XS, où les blocs se retrouvent les un en dessous des autres. Il faut savoir que ça existe car je pense vraiment que ça peut être utile dans certain cas, surtout utilisé avec ce qui suit…

Lien vers Codepen

 

Décalage des colonnes

Comme tu l’as surement remarqué, tout les blocs s’alignent tous systématiquement à gauche. Pour décaler des éléments il faut donner une nouvelle classe CSS à l’élément que tu veux décaler.

Pour décaler un bloc il faut saisir la classe CSS suivante: col-md-offset-4 par exemple. Note bien le mot offset (décalage en français) qui est à ajouté après la taille d’écran. Cette classe indique le nombre de colonne occupée par le décalage. Pour cet exemple, il s’agit un décalage pour les écrans « medium » de 4 colonnes.

Il faut faire attention à quelques détails  qui m’ont causés quelques problèmes:

  • le décalage concerne le bloc qui contient la classe CSS et « poussera » tout les blocs suivant sur la même ligne (row). (voir projet codepen)
  • Attention au « wrapping »! Lorsque le nombre de colonne dépasse 12, Bootstrap tient compte du décalage à partir du retour à la ligne, voir projet codepen.

Pour m’habituer à manipuler la grille et aux décalages, je me suis amusé à refaire la tête de Darth Vador avec Bootstrap. Ce mini-projet n’est pas responsive du tout, puisque j’ai intégré des éléments en utilisant le positionnement absolu et du coup si tu modifies la fenêtre ça ne ressemble plus à grand chose. Mais ce n’est pas l’objectif. Le but était vraiment de comprendre comment fonctionnait ces classes CSS ensembles. J’ai mis le code de ce mini projet sur Codepen, ainsi qu’un article à ce sujet.

L’imbrication

Nous avons vu beaucoup de choses jusque là, mais il en reste une dernière qui est assez pratique c’est l’imbrication. Il est en effet possible de » diviser » une colonne pour en créer plusieurs à l’intérieur. En effet, il suffit de définir une ligne à l’intérieur d’une colonne pour répartir le contenu à l’intérieur. Je sais pas si c’est clair, mais avec un peu de code, ça devrait aller mieux:

<div class="row"> <!-- Ligne principale-->
			<div class=" col-md-7 violet">
				<p>Je suis dans le violet</p>
				
				<div class="row"> <!-- Ligne secondaire-->
					<div class="col-md-6 vert">
					</div>
					
					<div class="col-md-6 bleu">
					</div>
				</div> <!-- Fin ligne secondaire-->
					<p>Je suis toujours dans le violet</p>
			</div>
	
			<div class=" col-md-5 jaune">
			</div>
		</div><!-- Fin ligne principale-->

Pour voir comment cela se positionne j’ai ajouté un peu de texte. La ligne imbriquée s’adapte à la hauteur du texte que j’ajoute. Autre détail, tu peux remarquer que Bootstrap n’uniformise pas les hauteurs de colonnes, donc attention au rendu que tu recherches.

Avec cet article, j’ai vraiment pu aller plus loin avec Bootstrap, j’espère que ça sera aussi ton cas. Essaye de te trouver des petits projet pour manipuler toutes ces classes CSS.

Autres projets que je suis en train de faire, c’est un portfolio que je réalise dans le cadre de la formation freecodecamp et qui doit être réalisé avec Bootstrap et Jquery. Je ne connais pas trop Jquery pour le moment, je vais me servir de ce projet pour aller plus loin à ce sujet, voilà pourquoi il n’est pas encore fini. Tu peux voir ce projet sur Codepen et retrouver certaines classes CSS propres à Boostrap dans le code.

Je te dis à Jeudi pour un nouvel article sur Bootstrap, pour parler des boutons.

A bientôt,

Guillaume