Ana içeriğe geç Dokümanlar navigasyonuna atla
in English

Düğme grubu

Bir dizi düğmeyi tek bir satırda gruplayın veya dikey bir sütunda istifleyin.

Temel örnek

Bir dizi düğmeyi .btnin ile sarın .btn-group.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>
Doğru olduğundan emin olun roleve bir etiket sağlayın

Yardımcı teknolojilerin (ekran okuyucular gibi) bir dizi düğmenin gruplandığını iletebilmesi için uygun bir roleözniteliğin sağlanması gerekir. Düğme grupları için bu role="group", araç çubuklarında bir role="toolbar".

Ek olarak, gruplara ve araç çubuklarına açık bir etiket verilmelidir, çünkü çoğu yardımcı teknoloji, doğru rol özniteliğinin varlığına rağmen bunları duyurmaz. Burada verilen örneklerde kullanıyoruz aria-labelama gibi alternatifler aria-labelledbyde kullanılabilir.

.navBu sınıflar, navigasyon bileşenlerine alternatif olarak bağlantı gruplarına da eklenebilir .

<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>

Karışık stiller

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

Seviyelendirilmiş stiller

<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

Onay kutusu ve radyo düğmesi grupları

Düğme benzeri onay kutusu ve radyo geçiş düğmelerini kusursuz görünümlü bir düğme grubunda birleştirin.

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

Düğme araç çubuğu

Daha karmaşık bileşenler için düğme gruplarını düğme araç çubuklarında birleştirin. Grupları, düğmeleri ve daha fazlasını boşaltmak için gerektiğinde yardımcı program sınıflarını kullanın.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>

Araç çubuklarınızdaki giriş gruplarını düğme gruplarıyla karıştırmaktan çekinmeyin. Yukarıdaki örneğe benzer şekilde, işleri düzgün bir şekilde yerleştirmek için muhtemelen bazı yardımcı programlara ihtiyacınız olacak.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

boyutlandırma

Bir gruptaki her düğmeye düğme boyutlandırma sınıfları uygulamak yerine, birden çok grubu iç içe yerleştirirken her biri dahil olmak üzere yalnızca .btn-group-*her birine ekleyin..btn-group



<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

yuvalama

Bir dizi düğmeyle karışık açılır menüler istediğinizde, a'yı .btn-groupdiğerinin içine yerleştirin ..btn-group

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Dikey varyasyon

Bir dizi düğmenin yatay yerine dikey olarak yığılmış görünmesini sağlayın. Bölme düğmesi açılır menüleri burada desteklenmez.

<div class="btn-group-vertical">
  ...
</div>