BootStrap ile Buton Grupları Oluşturma
BootStrap .btn-group seçicisi sayesinde butonları bir grup halinde birleştirerek farklı görünümler elde edebiliriz.
Yukarıdaki örneğin kodları şu şekildedir:
<div class="btn-group">
<button type="button" class="btn btn-info">Buton1</button>
<button type="button" class="btn btn-primary">Buton2</button>
<button type="button" class="btn btn-success">Buton3</button>
<button type="button" class="btn btn-info">Buton4</button>
<button type="button" class="btn btn-primary">Buton5</button>
<button type="button" class="btn btn-success">Buton6</button>
</div>
Görüldüğü üzere önceki konudan bildiğimiz bootstrap butonları .btn-group uygulanmış bir div içine alınmıştır. İşte bu kadar basit.
Grup içindeki butonlara önceki konuda gördüğümüz tüm sınıfları (btn-lg, btn-md ...) ve kendi stillerimizi de uygulayabiliriz.
Şayet butonlarımızın yan yana değil de alt alta yerleşmesini istersek .btn-group-vertical sınıfını kullanmamız yetecektir.
Yatay buton grubunun bulunduğu yeri kaplamasını istersek ve a etiketlerini kullanıyorsak btn-group sınıfı ile birlikte btn-group-justified seçicisini kullanmamız yeterli olacaktır.
<div class="btn-group btn-group-justified">
<a class="btn btn-info" href="#">Buton1<
/a>
<a class="btn btn-info" href="#">Buton2</a>
<a class="btn btn-info" href="#">Buton3</a>
</div>
Ancak button etiketi kullanıyorsak aynı şeyi sağlamak için her butonu ayrı ayrı div.btn-group içine almamız gerekir.
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-info">Buton1</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Buton2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Buton3</button>
</div>
</div>
Buton grubu içerisinde açılır menü (dropdown) şeklinde menüler de kullanılabilir:
Yukarıdaki örneğin kodlarını incelersek, açılır menüyü oluşturmak için buton grup içinde bir div.btn-group daha açıldığını ve içinde bir ul listesinin oluşturulduğunu göreceksiniz.
<div class="btn-group">
<button type="button" class="btn btn-primary">Buton1</button>
<button type="button" class="btn btn-primary">Buton2</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Buton3 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Buton3.1</a></li>
<li><a href="#">Buton3.2</a></li>
<li><a href="#">Buton3.3</a></li>
</ul>
</div>
<button type="button" class="btn btn-primary">Buton4</button>
</div>
Aşağıdakine benzer açılır butonlar da yapılabilir:
<div class="btn-group">
<button type="button" class="btn btn-primary">Buton1</button>
<button type="button" class="btn btn-primary">Buton2</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="#">Buton2.1</a></li>
<li><a href="#">Buton2.2</a></li>
<li><a href="#">Buton2.3</a></li>
</ul>
</div>
bootstrap button groups, buton group, button, group, buton grubu, kullanımı, bootstrap buton grupları, örnekleri
KONU İLE İLGİLİ ÖRNEKLER
Bu konu ile ilgili örnek bulunmamaktadır.
7324 kez okundu.