Önyükleme Düğme Grupları
Düğme Grupları
Bootstrap, 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, gruptaki .btn-group-lg|sm|xstüm düğmeleri boyutlandırmak için sınıfı kullanın:
Ö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 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>
Yaslanmış Düğme Grupları
Ekranın tüm genişliğini yaymak için .btn-group-justified
sınıfı kullanın:
Öğelerle örnek <a>:
Örnek
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
Not: Öğeler için her düğmeyi bir sınıfa <button>sarmanız gerekir :.btn-group
Örnek
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</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:
Ö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 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</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" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>