Bootstrap - Grup Tombol

Grup tombol memungkinkan beberapa tombol untuk ditumpuk bersama dalam satu baris. Ini berguna saat Anda ingin menempatkan item seperti tombol perataan bersama-sama. Anda dapat menambahkan radio JavaScript opsional dan perilaku gaya kotak centang dengan Plugin Tombol Bootstrap .

Tabel berikut merangkum kelas-kelas penting yang disediakan Bootstrap untuk menggunakan grup tombol -

Kelas	Deskripsi	Contoh Kode
.btn-group	Kelas ini digunakan untuk grup tombol dasar. Bungkus rangkaian kancing dengan berkelas.btn di .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-toolbar	Ini membantu untuk menggabungkan kumpulan <div class = "btn-group"> menjadi <div class = "btn-toolbar"> untuk komponen yang lebih kompleks.	`<div class = "btn-toolbar" role = "toolbar"> <div class = "btn-group">...</div> <div class = "btn-group">...</div> </div>`
.btn-grup-lg, .btn-grup-sm, .btn-grup-xs	Kelas-kelas ini dapat diterapkan ke grup tombol alih-alih mengubah ukuran setiap tombol.	`<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	Kelas ini membuat sekumpulan tombol tampak ditumpuk secara vertikal daripada secara horizontal.	`<div class = "btn-group-vertical"> ... </div>`

Grup Tombol Dasar

Contoh berikut menunjukkan penggunaan kelas .btn-group dibahas dalam tabel di atas -

<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>

Bilah Alat Tombol

Contoh berikut menunjukkan penggunaan kelas .btn-toolbar dibahas dalam tabel di atas -

<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>

Ukuran kancing

Contoh berikut menunjukkan penggunaan kelas .btn-group-* dibahas dalam tabel di atas -

<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>

Bersarang

Anda dapat menyarangkan grup tombol dalam grup tombol lain, misalnya menempatkan a .btn-group di dalam yang lain .btn-group . Ini dilakukan ketika Anda ingin menu dropdown dicampur dengan serangkaian tombol.

<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>

Buttongroup Vertikal

Contoh berikut menunjukkan penggunaan kelas .btn-group-vertical dibahas dalam tabel di atas -

<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>