Bootstrap 5 knappegrupper

Kursusanbefaling:

Knapgruppe

Bootstrap 5 giver dig mulighed for at kombinere en række knapper i en knapgruppe (på en række): .btn-group klassen <div> element til at oprette en knapgruppe:

Eksempel

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

Prøv det selv

Tip:Vær venlig at ikke anvende knapstørrelse på hver knap i gruppen, men brug klassen .btn-group-lg Brugt til store knapgrupper eller .btn-group-sm Brugt til små knapgrupper:

Eksempel

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

Prøv det selv

Lodrette knapgrupper

Bootstrap 5 understøtter også lodrette knapgrupper:

Brug klassen .btn-group-vertical Opret en lodret knapgruppe:

Eksempel

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

Prøv det selv

Parallelt placerede knapgrupper

Standardmæssigt er knapgrupper "inline", og flere knapgrupper vises parallelt, når der er flere knapgrupper:

Eksempel

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

Prøv det selv

Indlejrede knapgrupper og dropdown-menuer

Indlejrede knapgrupper kan oprette dropdown-menuer (du vil lære mere om dropdown-menuer i senere kapitler):

Eksempel

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

Prøv det selv