Groupes de boutons
Bootstrap vous permet de regrouper une série de boutons en même temps (sur une seule ligne) dans un groupe de boutons:
Utilisez un <div> élément avec classe .btn-group pour créer un groupe de boutons:
Exemple
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div> Essayez - le vous - même » Astuce: Au lieu d'appliquer la taille des boutons à chaque bouton dans un groupe, utilisez la classe .btn-group-* à la taille tous les boutons dans le groupe:
Exemple
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div> Essayez - le vous - même » Vertical Groupes Bouton
Bootstrap prend également en charge des groupes de boutons verticaux:
Utilisez la classe .btn-group-vertical pour créer un groupe de boutons verticale:
Exemple
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div> Essayez - le vous - même » Justified Groupes Button
Pour couvrir toute la largeur de l'écran, utilisez le .btn-group-justified classe:
Exemple avec <a> éléments:
Exemple
<div class="btn-group
btn-group-justified">
<a
href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div> Essayez - le vous - même » Remarque: Pour <button> éléments, vous devez envelopper chaque bouton dans un .btn-group classe:
Exemple
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn
btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div> Essayez - le vous - même » Bouton Nesting Groupes et des menus déroulants
groupes de boutons Nest pour créer des menus déroulants:
Exemple
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div
class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul
class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div> Essayez - le vous - même » Dropdowns Button fendus
Exemple
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div> Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »