Les boutons groupés

Les boutons groupés ou Button groups en anglais, est un ensemble de boutons, groupés, sur une seule ligne. Bootstrap 3 nous permet à  l’aide des deux classes .btn-group et .btn-group-vertical de créer deux types d’affichage des boutons groupés.

Les boutons groupés horizontaux

Est l’affichage par défaut des boutons groupés. ils sont utilisés souvent pour intégrer une pagination dans un résultat de recherche.

Dans l’exemple ci-dessus, Nous avons inclus les boutons dans une balise <div> (de classe .btn-group). C’est tout simplement les boutons que nous avons crée dans le cours précédent, inclus dans la balise <div  class=”btn-group”>.

Les boutons groupés horizontaux s’affichent de la manière suivante :

image.

Les boutons groupés verticaux

De la même façon que dans l’exemple précédent, les boutons sont inclus dans une balise <div> (de classe .btn-group-vertical)

Les boutons groupés verticaux s’affichent de la manière suivante :

image.

 

Changer l’ordre des éléments dans une grille

Par défaut, les zones générées en utilisant une grille sont réparties de gauche à droite. Les classes .col-md-push-* et .col-md-pull-* permettent d’inverser l’ordre des éléments :

En utilisant la classe .col-md-push-8, nous poussons cette section à la suite de la seconde zone qui est mise en forme à l’aide de la classe .col-md-8.

Mise en place de la seconde zone. Par la classe .col-md-pull-4, nous la tirons devant la zone déclarée précédemment (classe .col-md-4).

Observons maintenant comment sont organisées les deux éléments après inversion d’affichage :

Changement d'ordre des éléments dans Bootstrap 3

Changement d’ordre des éléments dans Bootstrap 3