On doit commencer par créer une "div" global à laquelle on assignera la class "contenair" ou "contenair-fluid", la première se centre au milieu de la page et la seconde occupe tout l'espace. Cette classe comporte deja un marging de 15 px de chaque coté et a aussi une taille prédéfinie suivant le style de colonne choisie.
Puis une "div" avec la classe "row" et ensuite à l'intérieur de celle-ci les "div" bloc avec les classes de colonne.
Chaque block représente 12 colonnes donc en cas d'imbrication chaque bloc généré a un quota de 12 colonnes, on verra ça plus tard.
les blocs se déplacent en se positionnant les uns sous les autres suivant les tailles paliers correspondant aux classes données.
xs = x-small (smartphone < 768px ⇒ automatique)
sm = small(tablette ≥ 768 ⇒ 750px)
md = medium (écran ≥ 992px ⇒ 970px)
lg = large (écran ≥ 1200px ⇒ 1170px)
* Pour les gens qui n'aurez pas compris le "X" représente le nombre de colonnes pouvant allez de 1 à 12,
et bien sûr dans la classe on indique un seule nom de colonne identique.
Ici une seul rangée avec deux éléments qui occupent tout l'espace
On peut voir ici que le bloc possédant la plus grande hauteur repousse la "row" suivante.
Mais que les autres blocs de la même "row" ne s'adaptent pas.
On peut aussi sauter des colonnes en rajoutant dans la classe l'élément "offset"
Si vous regarder bien le code et le schéma, vous pourrez voir qu'il y a plusieurs choses incompréhensibles.
- La première vous l'aurrez peut être remarquer, c'est le fait de trouver deux fois la même class dans la balise en ligne 03.
Donc vous comprendrez bien que ce n'est pas possible et de ce fait ces doublons ne fonctionnent pas et du fait de l'absence de colonne à droite et tout à fait normal.
- La deuxième vient du positionement des blocs par rapport au code écrit en ligne 11, 12, 13. On peut visualiser l'inversement de la position des blocs par rapport au html écrit. La position de l'offset qu'il soit ecrit en première classe ou en seconde est toujours appliquée la première.
Avec les élément "push" et "pull" on peut pousser ou tirer les colonnes.
- "PUSH" permet de pousser les colonnes vers la droite.
- "PULL" permet de tirer les colonnes vers la gauche.
Etudions un peut les mouvements de bloc:
- Premiere ligne: On peut voir l'action du "push" qui repousse tout simplement le bloc de 4 colonnes.
- Deuxième ligne: Cette fois on ce sert du "pull" qui tire tout simplement le bloc de 2 colonnes.
- Troisième ligne: j'ai créé 2 bloc identique de 6 colonnes, un premier bleu avec la commande "col-lg-push-6" ce qui pousse mon bloc de 6 colonnes et un second vert avec la commande "col-lg-pull-6" ce qui tire la commande de 6 colonnes et sur le rendu visuel nous voyons qu'il sont inversé.
- Quatrième ligne, Ca ce complique un peut, j'ai donc créé deux bloc bleu et vert de 3 colonnes le premier pousser de 8 colonnes ce qui est égal à 11 donc il vient se caler à 1 colonne de la fin de la rangée et un second tirer de 2 colonnes ce qui le ramène a 1 colonnes du début de la rangée.
Si vous reprenner le code et que vous donner la valeur 0 au "push" et "pull" vous constaerer tout simplement que les actions demander démarre toujour de la position initiale du bloc concerné.
On peut imbriquer plusieurs niveaux mais attention à ne pas vous y perdre
Voici un exemple concret de positionnement d'une page
Nous pouvons voir dans cet exemple que l'on retrouve plusieurs tailles de bloc.
- Le header, le menu et le footer en "sm".
- Le contenu en "md".
Si on réduit l'écran nous verrons le système de mouvement de bloc qui se déplace au fur et à mesure des tailles palier.
On visualise bien le mouvement des blocs et le fait que seul le contenu s'est empiler en passant à la taille tablette et ensuite la totalité des block s'empile en franchissant la limite smartphone.
accueil