Bootstrap - Düğme Grupları

Düğme grupları, birden çok düğmenin tek bir hatta istiflenmesine izin verir. Bu, hizalama düğmeleri gibi öğeleri birlikte yerleştirmek istediğinizde kullanışlıdır. Bootstrap Düğme Eklentisi ile isteğe bağlı JavaScript radyosu ve onay kutusu stili davranışı ekleyebilirsiniz .

Aşağıdaki tablo, Bootstrap'in düğme gruplarını kullanmak için sağladığı önemli sınıfları özetlemektedir -

Sınıf	Açıklama	Kod Örneği
.btn-group	Bu sınıf, temel bir düğme grubu için kullanılır. Sınıf ile bir dizi düğmeyi sarın.btn içinde .btn-group.	`<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button1</button> <button type = "button" class = "btn btn-default">Button2</button> </div>`
.btn-araç çubuğu	Bu, daha karmaşık bileşenler için <div class = "btn-group"> kümelerini bir <div class = "btn-toolbar"> olarak birleştirmeye yardımcı olur.	`<div class = "btn-toolbar" role = "toolbar"> <div class = "btn-group">...</div> <div class = "btn-group">...</div> </div>`
.btn-group-lg, .btn-group-sm, .btn-group-xs	Bu sınıflar, her düğmeyi yeniden boyutlandırmak yerine düğme grubuna uygulanabilir.	`<div class = "btn-group btn-group-lg">...</div> <div class = "btn-group btn-group-sm">...</div> <div class = "btn-group btn-group-xs">...</div>`
.btn-group-vertical	Bu sınıf, bir dizi düğmenin yatay yerine dikey olarak yığılmış görünmesini sağlar.	`<div class = "btn-group-vertical"> ... </div>`

Temel Düğme Grubu

Aşağıdaki örnek, sınıfın kullanımını gösterir .btn-group yukarıdaki tabloda tartışılmıştır -

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
   
</div>

Düğme Araç Çubuğu

Aşağıdaki örnek, sınıfın kullanımını gösterir .btn-toolbar yukarıdaki tabloda tartışılmıştır -

<div class = "btn-toolbar" role = "toolbar">
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
   </div>
   
</div>

Düğme Boyutu

Aşağıdaki örnek, sınıfın kullanımını gösterir .btn-group-* yukarıdaki tabloda tartışılmıştır -

<div class = "btn-group btn-group-lg">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group btn-group-sm">
   <button type = "button" class = "btn btn-default">Button 4</button>
   <button type = "button" class = "btn btn-default">Button 5</button>
   <button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group btn-group-xs">
   <button type = "button" class = "btn btn-default">Button 7</button>
   <button type = "button" class = "btn btn-default">Button 8</button>
   <button type = "button" class = "btn btn-default">Button 9</button>
</div>

Yuvalama

Düğme gruplarını başka bir düğme grubu içine yerleştirebilirsiniz, yani bir .btn-group bir başkasının içinde .btn-group . Bu, açılır menülerin bir dizi düğmeyle karıştırılmasını istediğinizde yapılır.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

Dikey Düğme Grubu

Aşağıdaki örnek, sınıfın kullanımını gösterir .btn-group-vertical yukarıdaki tabloda tartışılmıştır -

<div class = "btn-group-vertical">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group-vertical">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>