Bootstrap 5 Button Groups

Aanbevolen cursussen:

Knopgroep

Gebruik de Bootstrap 5 om een reeks knoppen samen te voegen in een knopgroep (op een rij): .btn-group Klasse <div> Elementen om knopgroepen te maken:

Voorbeeld

<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>

Probeer het zelf

Tip:Merk op: Plaats geen knopschalen toepassing op elke knop in de groep, maar gebruik de klasse .btn-group-lg Gebruikt voor grote knopgroepen of om .btn-group-sm Gebruikt voor kleine knopgroepen:

Voorbeeld

<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>

Probeer het zelf

Verticale knopgroepen

Bootstrap 5 ondersteunt ook verticale knopgroepen:

Gebruik de klasse .btn-group-vertical Maak een verticale knopgroep:

Voorbeeld

<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>

Probeer het zelf

Naast elkaar liggende knopgroepen

Standaard is de knopgroep "inline", en wanneer er meerdere knopgroepen zijn, worden deze naast elkaar weergegeven:

Voorbeeld

<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>

Probeer het zelf

Geïntegreerde knopgroepen en dropdown-menus

Geïntegreerde knopgroepen, die een dropdown-menu kunnen creëren (u zult in latere hoofdstukken meer leren over dropdown-menus):

Voorbeeld

<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="#">Telefoon</a>
      <a class="dropdown-item" href="#">Tablet</a>
    </div>
  </div>
</div>

Probeer het zelf