Bootstrap 4 groupes de boutons
Groupes de boutons
Bootstrap 4 vous permet de regrouper une série de boutons ensemble (sur une seule ligne) dans un groupe de boutons :
Utilisez un <div>élément avec classe .btn-grouppour 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>
Conseil : Au lieu d'appliquer des tailles de bouton à chaque bouton d'un groupe, utilisez la classe .btn-group-lgpour un grand groupe de boutons ou la .btn-group-smpour un petit groupe de boutons :
Gros boutons :
Boutons par défaut :
Petits boutons :
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>
Groupes de boutons verticaux
Bootstrap 4 prend également en charge les groupes de boutons verticaux :
Utilisez la classe .btn-group-verticalpour créer un groupe de boutons verticaux :
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>
Groupes de boutons d'imbrication et menus déroulants
Imbriquer des groupes de boutons pour créer des menus déroulants (vous en apprendrez plus sur les menus déroulants dans un chapitre ultérieur) :
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
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Listes déroulantes des boutons partagés
Exemple
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
Groupe de boutons verticaux avec liste déroulante
Exemple
<div class="btn-group-vertical">
<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
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Groupes de boutons côte à côte
Les groupes de boutons sont "en ligne" par défaut, ce qui les fait apparaître côte à côte lorsque vous avez plusieurs groupes :
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>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>