Bootstrap 4 gruppi di pulsanti
Gruppi di pulsanti
Bootstrap 4 ti consente di raggruppare una serie di pulsanti insieme (su una singola riga) in un gruppo di pulsanti:
Usa un <div>elemento con classe .btn-groupper creare un gruppo di pulsanti:
Esempio
<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>
Suggerimento: invece di applicare le dimensioni dei pulsanti a tutti i pulsanti di un gruppo, utilizzare class .btn-group-lgper un gruppo di pulsanti di grandi dimensioni o .btn-group-smper un gruppo di pulsanti piccoli:
Pulsanti grandi:
Pulsanti predefiniti:
Bottoni piccoli:
Esempio
<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>
Gruppi di pulsanti verticali
Bootstrap 4 supporta anche i gruppi di pulsanti verticali:
Usa la classe .btn-group-verticalper creare un gruppo di pulsanti verticale:
Esempio
<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>
Nidificazione di gruppi di pulsanti e menu a discesa
Annida i gruppi di pulsanti per creare menu a discesa (scoprirai di più sui menu a discesa in un capitolo successivo):
Esempio
<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>
Menu a discesa dei pulsanti di divisione
Esempio
<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>
Gruppo pulsanti verticali con menu a discesa
Esempio
<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>
Gruppi di pulsanti affiancati
I gruppi di pulsanti sono "in linea" per impostazione predefinita, il che li fa apparire fianco a fianco quando hai più gruppi:
Esempio
<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>