Düğme Grupları
Bootstrap grubuna araya düğmeleri bir dizi izin verir (on a single line) bir düğme grubunda:
Bir kullan <div> class ile eleman .btn-group bir düğme grubu oluşturmak için:
Ö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> Kendin dene " İpucu: Bunun yerine bir grupta her düğme düğme boyutlarını uygulanması, kullanma sınıf .btn-group-* boyutta grubundaki tüm düğmeler için:
Ö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> Kendin dene " Dikey Düğme Grupları
Bootstrap da dikey düğme grupları destekler:
Sınıf kullanın .btn-group-vertical dikey düğme grubu oluşturmak için:
Ö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> Kendin dene " Gerekçeli Düğme Grupları
Ekranın tüm genişliği boyunca için kullanımı .btn-group-justified sınıfı:
Örnek <a> elemanları:
Ö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> Kendin dene " Not: For <button> elemanları, bir de her düğmeyi sarmak gerekir .btn-group sınıfının:
Ö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> Kendin dene " Yuvalama Düğme Grupları & Açılır Menüler
Nest düğme grupları açılır menüler oluşturmak için:
Ö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> Kendin dene " Bölünmüş Düğme DROPDOWNS
Ö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> Kendin dene " Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »