THE GRID !

De boostrap.

- L'univers cybernétique ? Je ne vois pas le rapport ..

Justement mon petit Kevin, il n'y en a pas ! On parle du grid de bootstrap ici, pas celui de Tron.

Le Grid System de boostrap, comme son nom l'indique, c'est un système de grille à 12 colonnes permettant de gérer facilement la vue d'une page et surtout son responsive !

Et le Grid system c'est putain de simple et tellement pratique, une fois qu'on a compris.

Donc si quelqu'un peux me faire une doc dessus , je suis preneur !

Mais dans l'immédiat, parce que vous n'êtes quand même pas venus là pour rien, j'ai pour vous, florilèges d'informations et d'exemple pour vous aider.

On commence facile, des exemples :

                

    
        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 !

Les "tailles" des colonnes, parceque la taille compte même si on vous dit le contraire.

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 ! Pas la peine de chouiner.

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

Si vous n'avez toujours rien compris, moi, j'ai fais de mon mieux.

MODIFIER TOUT CA

Les 5 astuces de papi branque pour un bon grid system.

1) TOUJOURS METTRE UN PUTAIN DE ROW.

Fini de rigoler sur le mot row ? Merci.

Le row c'est l'élément qui va entourer chacune de vos lignes (et pour les anglophone qui se la pette, oui, row ça veux dire rangée).

Il doit être dans un container ou un container fluid, bon, ok. Mais surtout, il permet de gérer correctement votre intégration de la grille. Sans le row votre grille va faire n'importe quoi et déborder de toute part :

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 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. Compter jusqu'a 12 ce n'est pas très difficile ( bon, même si moi je suis pas sûr de réussir ..)

Pas-centree

Centree

Voila voila, je ne pense pas avoir plus d'infos, donc comme on dit chez nous :