Button Groups

Button Groups

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. Bu kısım kırmızı ile işaretlenmiştir.

<div class="btn-group">
    <button type="button" class="btn btn-primary">Buton1</button>
    <button type="button" class="btn btn-primary">Buton2</button>
    <div class="btn-group">
      <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.



YORUMLAR




442  kez okundu.

Online Kullanıcı Sayısı 53