Bootstrap 4 Düğme Grubu
Düğme Grupları
Bootstrap 4, bir düğme grubunda bir dizi düğmeyi (tek bir satırda) birlikte gruplandırmanıza olanak tanır:
Bir düğme grubu oluşturmak için sınıflı bir <div>öğe kullanın:.btn-group
Örnek
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
İpucu: Bir gruptaki her düğmeye düğme boyutları uygulamak yerine, .btn-group-lgbüyük düğme grubu için sınıfı veya .btn-group-smküçük düğme grubu için sınıfı kullanın:
Büyük Düğmeler:
Varsayılan Düğmeler:
Küçük Düğmeler:
Örnek
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Dikey Düğme Grupları
Bootstrap 4 ayrıca dikey düğme gruplarını da destekler:
.btn-group-verticalDikey bir düğme grubu oluşturmak için sınıfı kullanın :
Örnek
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Yuvalama Düğme Grupları ve Açılır Menüler
Açılır menüler oluşturmak için düğme gruplarını iç içe yerleştirin (açılır menüler hakkında daha sonraki bir bölümde daha fazla bilgi edineceksiniz):
Örnek
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Bölünmüş Düğme Açılır Menüleri
Örnek
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
Dikey Düğme Grubu w/ Dropdown
Örnek
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Düğme Grupları Yan Yana
Düğme grupları varsayılan olarak "satır içidir", bu da birden çok grubunuz olduğunda yan yana görünmelerini sağlar:
Örnek
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>