THE GRID !
De boostrap.
Pour moi, le plus important et utile élément de bootstrap.
Simple dans sa complexité.
Le Debut
La base : une ligne, 12 colonnes à l’intérieur, le tout faisant 100% du parent (largeur).
On peut gérer la taille de nos éléments à travers ces 12 colonnes, une taille de 6 faisant donc 50% du parent , 3, 25% etc.
Responsive ?
On complique un peu.
Un petit attribut en plus dans le grid system permet de gérer ces tailles en fonction de la taille de l’écran.
Exemple simple : Une des tailles d’écran type pc étant >= 1200px.
si je met un élément avec une taille de 6 et cette attribut >=1200px, mon bloque sera d’une taille de 50% mais uniquement si l’écran de l’utilisateur est >= 1200px ! En dessous de cette taille il se remettra à 100%.
Deux contenu à 50% l’un à côté de l’autre passeront l’un en dessous de l’autre en dessous de 1200px.
Voilà déjà pas mal de théorie.
Du vrai code maintenant :
Je vous ai compris !
Je sais ce qui s'est passé ici.
Je vois ce que vous avez voulu faire.
Je vois que la route que vous avez ouverte en Algérie,
c'est celle de la rénovation et de la fraternité.
Tous les hommes libres, où qu'ils vivent,
sont des citoyens de Berlin. Par conséquent,
en tant qu'homme libre, je suis fier de prononcer ces mots :
Ich bin ein Berliner !
Comme je vous est dis, bootstrap est la pour le responsive, mais concrètement , comment ? Et c'est quoi ce charabia de col ?
Le grid systeme c'est donc une div class row qui encadre chaque ligne.
Dedans, c'est des col-xx-y, xx étant l'une des 4 "tailles" d'écran, et y, un chiffre de 1 à 12.
Donc les tailles, je vous les donnes et j'explique.
- Ecran >= à 1200px on utiliser col-lg
- Ecran >= à 992px on utiliser col-md
- Ecran >= à 768px on utiliser col-sm
- Ecran < à 768px on utiliser col-xs
Ca veux dire que si je veux un design de deux images côtes à côtes au dessus de 768px D'ECRAN ( pas la div parent, l'écran !) je dois faire un div row avec dedans deux div.col-sm-6 (la moitié de 12) avec les images à l'intérieur.
Bootstrap va ainsi régler à une taille de 6/12 chaque bloque par rapport à la div.row temps que l'écran fais plus de 768px.
En dessous de cette valeur bootstrap va passer à une taille des div col-sm-6 à 12/12 , l'équivalent d'un col-xs-12 pour chaque.
Un peu de technique expliquera les choses peut-être mieux que moi :
Le col-sm-6 met un float 50% avec un @query pour une page >= 768px et remet en normal donc en dehors de cette taille.
Le but au final c'est simple, vous mettez de l'information en ligne sur de grand écran, puis un peu moins en ligne sur des tablettes et en colonnes sur des téléphones en quelques classes.
Les 5 astuces pour un bon grid system.
1) Toujours mettre un ROW.
Le row c'est l'élément qui va entourer chacune de vos lignes (ça veux dire rangée).
Il doit être dans un container ou un container fluid.
Mais surtout, il permet de gérer correctement votreintégration de la grille. Sans le row votre grille va faire n'importe quoi et risque de déborder de toute part :
Contenu
Contenu
Contenu
Contenu
Contenu
Contenu
Contenu
Contenu
Si vous faites bien attention, vous verrez que sans le row, votre contenu est réduit de par en par de 15px.
2) Mettre des div.col dans le row, MINIMUM DEUX.
Bah oui, en dessous de deux ca ne sers à rien d'utiliser le grid !
3) Ne JAMAIS au grand JAMAIS mettre de col-xx-12.
C'est inutile ! Je n'est encore jamais trouvé de raison décente pour l'utiliser à moins de le mettre dans un exemple pour bien appuyer l'explication du grid (ce que fait bootstrap). Vraiment, si quelqu'un me trouve un endroit où c'est nécessaire je veux bien l'info car pour le moment je vois ça partout inutilement et ça me rends fou.
5) Toujours garder en tête que son grid doit être sur 12 colonnes.
Il faut bien faire attention à la découpe pour ne pas faire quelque chose de bancale , ou qui serait décalée.
Pas-centre
Centre
Voila voila, je ne pense pas avoir plus d'infos
La suite au prochain épisode.