Gestion des colonnes … les méconnues de Bootstrap 3
Connaissez vous les classes pull et push de Bootstrap 3 ? Ces classes sont peu utilisés et pourtant bien utiles voir indispensables … J’ai en effet déjà vu des bricolages franchement laid ou bien des design pas franchement adaptées aux mobiles.
A quoi servent ces classes pull – push ?
Prenons l’exemple d’un design en 2 colonnes avec à gauche une image et à droite un texte que l’on inverse de coté une ligne sur 2 … classique.
Pour cela on pourrait faire :
<div class="col-md-6"><img src="Mon-image-gauche" alt="" /></div>
<div class="col-md-6">Mon texte à droite</div>
<div class="col-md-6">Mon texte à gauche</div>
<div class="col-md-6"><img src="Mon-image-droite" alt="" /></di>
Oui mais sur mobile cela donne quoi ?
Pas terrible n’est-ce pas ? (bon encore que dans mon illustration ça va encore mais avec un texte un peu plus long et 4 lignes on ne comprend plus rien)
C’est là que les classe pull et push de Bootstrap interviennent !
Design responsive et mise en place ce classes pull et push !
Reprenons l’exemple ci-dessus. Pour la partie « grand écran » on ne change rien. Par contre pour les mobiles on aimerait bien alterner image et texte.
C’est là que nos classes interviennent, elles permettent de garder l’alternance mais de déplacer les colonnes à gauche ou à droite :
<div class="col-md-6"><img src="Mon-image-gauche" alt="" /></div>
<div class="col-md-6">Mon texte à droite</div>
<div class="col-md-6 col-md-push-6"><img src="Mon-image-droite" alt="" /></di>
<div class="col-md-6 col-md-pull-6">Mon texte à gauche</div>
Si vous utiliser un CMS ou un langage dynamique pour générer vos pages vous pouvez rajouter ces classes un ligne sur deux (index paire/impaire) dans votre boucle.
Si vous avez des remarques n’hésitez pas !
