Sommaire

Une barre verticale de boutons COMPOSANTS POUR LES BOUTONS:Barre verticale de boutons

À l’aide de la classe .btn-group-vertical dans la boîte <div> vous pouvez afficher la barre des boutons verticalement.

Voici le code utilisé :

<div class="btn-group-vertical"> 
   <button type="button" class="btn btn-default">Introduction</button>
   <button type="button" class="btn btn-default">Résultats</button>
   <button type="button" class="btn btn-default">Conclusion</button>
</div>

Voici l’affichage obtenu :

images/C11-002.png

Voici les sélecteurs supplémentaires qui utilisent .btn-group-vertical :

.btn-group, .btn-group-vertical { 
   position: relative; 
   display: inline-block; 
   vertical-align: middle; 
} 
.btn-group-vertical > .btn:first-child:not(:last-child) { 
   border-top-right-radius: 4px; 
   border-bottom-right-radius: 0; 
   border-bottom-left-radius: 0; 
} 
.btn-group-vertical > .btn, .btn-group-vertical > .btn-group { 
   display: block; 
   float: none; 
   width: 100%; 
   max-width: 100%; 
} 
.btn-group > .btn, .btn-group-vertical > .btn { 
   position: relative; 
   float: left; 
}