Bootstrap 5 Düğme Grubu

Kurs Önerileri:

Düğme Grubu

Bootstrap 5, bir dizi düğmeyi düğme grubunda bir araya getirmenizi sağlar (satırda): .btn-group sınıfının <div> elemenleri kullanarak düğme grubu oluşturmak için:

Örnek

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

Kendi Kendine Deneyin

Uyarı:Lütfen her düğme için düğme boyutunu kullanmayın,而是将类 .btn-group-lg Büyük düğme grupları için veya .btn-group-sm Küçük düğme grupları için:

Örnek

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

Kendi Kendine Deneyin

Dikey düğme grupları

Bootstrap 5, dikey düğme gruplarını da destekler:

Sınıf kullanın .btn-group-vertical Dikey düğme grubu oluşturma:

Örnek

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

Kendi Kendine Deneyin

Yanyana düğme grupları

Varsayılan olarak, düğme grupları "inline"dir, birden fazla düğme grubu varsa yanyana gösterilir:

Örnek

<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">Jiālì</button>
  <button type="button" class="btn btn-primary">Chángchéng</button>
  <button type="button" class="btn btn-primary">Hóngqí</button>
</div>

Kendi Kendine Deneyin

Dahili düğme grupları ve açılır menüler

Dahili düğme grupları, açılır menü oluşturabilir (Açılır menüler hakkında daha fazla içerik sonraki bölümlerde öğreneceksiniz):

Örnek

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

Kendi Kendine Deneyin