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 .btn
in 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 role
ve 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-label
ama gibi alternatifler aria-labelledby
de kullanılabilir.
.nav
Bu 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-group
diğ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>