Bootstrap 4 Buton Grupları(Button Groups)

Bootstrap 4 Buton Grupları (Button Groups)

Bootstrap4'te butonları bir arada tutmak için button groups adı verilen yapılar kullanılır. Butonları bir grup içerisinde toplamak için butonları kapsayan HTML nesnesine (genelde bu eleman div olur) btn-group class değeri verilir. Bu şekilde butonlar yanyana geleceklerdir.
Örnek:<div class="btn-group"> <button type="button" class="btn btn-primary" >Primary1</button> <button type="button" class="btn btn-primary" >Primary2</button> <button type="button" class="btn btn-primary" >Primary3</button> </div> Butonlara büyüklük verilebildiğini daha önceki konularda anlatmıştım, buton grupları sayesinde, tüm butonlara tek seferde büyüklük verilebilir. Bunun için butonları kapsayan elemana btn-group btn-group-* değeri verilmesi yeterlidir.
* işaretli yere büyüklük değeri gelmelidir.(xs, sm, lg)
Örnek:<div class="btn-group btn-group-lg"> ....... </div>

Dikey Buton Grupları(btn-group-vertical)

Butonları yatay olarak gruplayabileceğimiz gibi dikey olarak da gruplayabiliriz. Bu işlem için kapsayıcı HTML elemanının class değerine btn-group-vertical vermek yeterlidir.
Örnek: <div class="btn-group-vertical"> ....... </div>

İç içe Buton Grupları(btn-group dropdown-menu)

İç içe buton grupları ile açılır menülere benzer yapılar oluşturulabilir. Bunun için birden fazla btn-group özelliği kullanılmaktadır.
En dıştaki kapsayan elemana btn-group verilmelidir.
Alt menü için gerekli elamana ise class="btn btn-primary dropdown-toggle" data-toggle="dropdown" özellikleri verilmesi zorunludur, böylece seçili eleman altında bir menü açılabilir hale gelecektir.
Altında açılan menü için ise class="dropdown-menu" özellikleri eklenmelidir.
Aşağıdaki örnek incelenerek istenilen iç içe menünün nasıl oluşturulacağı anlaşılacaktır. Ö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>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com