Bootstrap 5: Gruppo di bottone

Gruppo di pulsanti

Bootstrap 5 ti permette di combinare una serie di pulsanti in un gruppo (in una riga):

Utilizza classi con .btn-group Classe <div> Elemento per creare gruppi di pulsanti:

Esempio

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Prova da solo

Suggerimento:Non applicare la dimensione dei pulsanti a ogni pulsante del gruppo, ma utilizzare la classe .btn-group-lg Utilizzato per gruppi di pulsanti grandi o per combinare .btn-group-sm Utilizzato per gruppi di pulsanti piccoli:

Esempio

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Prova da solo

Gruppo di pulsanti verticale

Bootstrap 5 supporta anche i gruppi di pulsanti verticali:

Utilizzare la classe .btn-group-vertical Creare un gruppo di pulsanti verticale:

Esempio

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Prova da solo

Gruppo di pulsanti in parallelo

Per impostazione predefinita, il gruppo di pulsanti è "inline", quando ci sono più gruppi di pulsanti vengono visualizzati in parallelo:

Esempio

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">Geely</button>
  <button type="button" class="btn btn-primary">Changcheng</button>
  <button type="button" class="btn btn-primary">Hongqi</button>
</div>

Prova da solo

Gruppo di pulsanti annidato e menu a discesa

Gruppo di pulsanti annidato, può creare menu a discesa (sarai introdotto a più contenuti sui menu a discesa nei capitoli successivi):

Esempio

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Xiaomi</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Telefono</a>
      <a class="dropdown-item" href="#">Tablet</a>
    </div>
  </div>
</div>

Prova da solo