Les classes pull et push
Les classes pull et push
-
Objectifs
- Etre capable d’utiliser la grille de Bootstrap
-
Présentation
- Comme leur nom le suggère, « push » et « pull » consiste respectivement à « pousser » et « tirer ».
- ces deux classes permettent de gérer l’ordre des colonnes dans une grille
- Très logiquement, les colonnes s’affichent dans l’ordre du flux pendant leur création. Il peut arriver qu’on veuille bouleverser cet ordre, c’est pourquoi ces deux classes sont été crées
- Les « push » et les « pull » sont par défaut héréditaires d’un format à un autre. S’ils sont appliqué sur sm, ils s’appliqueront alors sur md et lg.
-
Exemple
- 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 le faire on a écrit:
- Oui mais sur mobile cela donne quoi ?
- Pour corriger le problème les classe pull et push de Bootstrap interviennent
- Pour la partie « grand écran » ou « lg » on ne change rien. Par contre pour les mobiles ou « xm » on aimerait bien alterner image et texte on obtient:
Les mêmes classes seront remplacé par la classe order avec Bootstrap 4.0.0
<div class= "container">
<div class="row">
<div class="col-md-4">
<img src="images/Tigre du Bengale.jpg" alt="Tigre du Bengale" />
</div>
<div class="col-md-8">
<p><h4>Le tigre du Bengale</h4> est le plus connu des différentes sous-espèces de tigres. Sa fourrure qui varie dans les différentes teintes de roux ou d'orangés, est barrée de stries brunes ou noires. Le dessous de son corps est un peu plus clair mais rayé de noir également.</p>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p><h4>Le tigre de Sibérie</h4> ou tigre de l'Amour (Panthera tigris altaica) est la plus grande sous-espèce du tigre, originaire du nord de l'Extrême-Orient tempéré : Sibérie orientale, Corée et nord de la Chine. Il est en « danger d'extinction ».</p>
</div>
<div class="col-md-4">
<img src="images/Tigre de Sibérie.jpg" alt="Tigre de Sibérie" />
</di>
</div>
</div>
<div class= "container">
<div class="row">
<div class="col-md-4">
<img src="images/Tigre du Bengale.jpg" alt="Tigre du Bengale" />
</div>
<div class="col-md-8">
<p><h4>Le tigre du Bengale</h4> est le plus connu des différentes sous-espèces de tigres. Sa fourrure qui varie dans les différentes teintes de roux ou d'orangés, est barrée de stries brunes ou noires. Le dessous de son corps est un peu plus clair mais rayé de noir également.</p>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-push-8">
<p><h4>Le tigre de Sibérie</h4> ou tigre de l'Amour (Panthera tigris altaica) est la plus grande sous-espèce du tigre, originaire du nord de l'Extrême-Orient tempéré : Sibérie orientale, Corée et nord de la Chine. Il est en « danger d'extinction ».</p>
</div>
<div class="col-md-4 col-md-pull-4">
<img src="images/Tigre de Sibérie.jpg" alt="Tigre de Sibérie" />
</di>
</div>
</div>
