Sommaire

Une barre de boutons simple COMPOSANTS POUR LES BOUTONS:Barre de boutons simples

Nous allons mettre en place une simple barre de boutons dans une boîte <div> associée à la classe .btn-group. Chaque bouton est un élément <button> avec la classe .btn et la classe .btn-default pour avoir un bouton Bootstrap par défaut.

Exemple du code HTML :

<div class="btn-group"> 
   <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 :

images/C11-001.png

Bien sûr, c’est à vous d’ajouter les éléments <a> si vous souhaitez créer des liens dans les boutons.

Voici les nombreux sélecteurs qui interviennent pour la mise en forme :

.btn-group, .btn-group-vertical { 
   position: relative; 
   display: inline-block; 
   vertical-align: middle; 
} 
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
   border-top-right-radius: 0; 
   border-bottom-right-radius: 0; 
} 
.btn-group > .btn:first-child { 
   margin-left: 0; 
} 
.btn-group > .btn, .btn-group-vertical > .btn { 
   position: relative; 
   float: left; 
} 
.btn-default { 
   color: #333;  ...