Cara Menggunakan Button Groups dengan Bootstrap

Kemarin saya sudah membahas mengenai penggunaan buttons dengan menggunakan bootstrap, kali ini hampir sama dan masih berhubungan dengan buttons tersebut,perbedaannya sekarang akan membahas button groups perluasan dari buttons yang sudah saya post.

Langsung saja kepembahasan poko permasalahan dan pembahasan. Butoon groups merupakan fasilitas bootstrap yang memungkinkan kita untuk membuat banyak button dengan satu baris saja. Hal seperti ini dapat digunakan untuk menu yang memiliki satu tujuan.

Button Groups

Berikut ini merupakan bentuk button group yang akan melintas dengan satu baris saja atau single line. Sebagai contoh dapat dilihat dibawah ini.

dari hasil diatas pastinya sudah mulai ada gambaran mengenai button group dengan gaya satu baris. Untuk kode HTML nya seperti dibawah ini.

<div class="btn-group">
 <button type="button" class="btn btn-info">Bootstrap Group</button>
 <button type="button" class="btn btn-info">WoBootstrap Group</button>
 <button type="button" class="btn btn-info">LearnBootstrap Group</button>
</div>

kperhatikan pada class .btn-group, class ini yang akan menjadikan style button menjadi gaya satu baris group. Untuk memperbesar ukuran pada button teman-teman hanya perlu menambahkan class .btn-group-lg maka button tersebut akan dengan sendiri menjadi lebih besar. Dengan ditambahkan clas tersebut penampilan button pun akan berubah seperti dibawah ini.

sekarang sudah terlihat perbedaan setelah ditambahkan dengan class .btn-group-lg button akan terlihat lebih besar. Kode HTML seperti dibawah ini.

<div class=" btn-group btn-group-lg">
 <button type="button" class="btn btn-info">Bootstrap Group</button>
 <button type="button" class="btn btn-info">WoBootstrap Group</button>
 <button type="button" class="btn btn-info">LearnBootstrap Group</button>
</div>

Vertical Style

Vertical style tidak ada perbedaan yang begitu signifikan tetapi gaya tata letak dari button group tersebut akan terlihat tertata dari atas kebawah. Kalau button yang dibahas diatas dengan tata letak satu baris. Sebagai contoh vertical button group ini bisa dilihat dibawah ini.

dengan hasil dari vertical tersebut, sekarang dapat dibedakan diantara button yang pertama dibahas. Untuk kode HTMLnya dapat dilihat dibawah ini.

<div class=" btn-group-vertical">
 <button type="button" class="btn btn-info">Bootstrap Group</button>
 <button type="button" class="btn btn-info">WoBootstrap Group</button>
 <button type="button" class="btn btn-info">LearnBootstrap Group</button>
</div>

perhatikan pada class .btn-group-vertical karena dengan adanya class tersebut tampilan atau tata letak button menjadi vertical. 

Justified Style

 Apa itu justified ?? saya kira semuanya sudah mengetahui bahwa justified adalah tata letak sama kiri dan kanan, nah pada button justified akan sama rata dengan sisi kana dan kiri serta menyesuaikan lebar halaman, contohnya.

Botstrap Group
 WoBotstrap Group
 LearBotstrap Group

hasil diatas ngeblock sesuai dengan lebar halaman. Kode HTMLnya dapat dilihat dibawah ini. Perlu diperhatikan penggunaan button justified style dapat digunakan dengan elemen <a> dan elemen <button>. Dibawah ini contoh penggunaan dengan elemen <a>.

<div class="btn-group btn-group-justified">
 <a href="#" class="btn btn-info">Botstrap Group</a>
 <a href="#" class="btn btn-info">WoBotstrap Group</a>
 <a href="#" class="btn btn-info">LearBotstrap Group</a>
</div>

sedangkan penggunaan dengan elemen <button> dapat dilihat dibawah ini. Perlu diperhatikan penggunaan dengan elemen <button> ada sedikit tambahan dengan elemen <div> dan class .btn-group.

kode HTML

<div class="btn-group btn-group-justified">
 <div class="btn-group">
  <button type="button" class="btn btn-info">Bootstrap</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-info">WoBootstrap</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-info">LearnBootstrap</button>
 </div>
</div> 

Button Group & Dropdown

Untuk penerapan dropdown pada button group sejatinya sama dengan membuat button dropdown yang pernah saya posting dahulu. Untuk lebih jelasnya silahkan lihat contoh dibawah ini.

• Css
• Component
• Js

kode HTMLnya dapat dilihat dibawah ini.

<div class="btn-group">
 <button type="button" class="btn btn-info">Bootstrap</button>
 <button type="button" class="btn btn-info">WoBootstrap</button>
 <div class="btn-group">
  <button tyep="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">LearnBootstrap <b class="caret"></b></button>
  <ul class="dropdown-menu">
   <li><a href="">Css</a></li>
   <li><a href="">Component</a></li>
   <li><a href="">Js</a></li>
  </ul>
 </div>
</div>

sekian untuk pembahasannya semoga bermanfaat, jika ada yang kurang dipahami dapat didiskusikan, belajar bersama dan berbagi bersama.Cayoooooooooooo...