Mempelajari Button Groups di Bootstrap

10 December 2016
Kemarin kita sudah belajar membuat menu dropdown di bootstrap. Seperti janji saya, sekarang kita akan mempelajari Button Groups di Bootstrap.

Dasar

Bungkus kumpulan button dengan .btn di dalam .btn-group
Contoh penerapannya:
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Kiri</button>
  <button type="button" class="btn btn-default">Tengah</button>
  <button type="button" class="btn btn-default">Kanan</button>
</div>
Hasilnya seperti ini:

Warna

Untuk memberi warna pada button, kita perlu menambahkan elemen pada kelas .btn
Adapun elemen tersebut adalah:

.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
Contoh penerapannya:
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Default</button>
</div>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">Primary</button>
</div>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-success">Success</button>
</div>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-info">Info</button>
</div>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-warning">Warninglt;/button>
</div>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-danger">Danger</button>
</div>
Hasilnya:

Button Toolbar

Untuk mendapatkan komponen yang lebih kompleks, kita bisa mengkombinasikan set dari <div class="btn-group"> kedalam <div class="btn-toolbar">
Contoh penerapannya:
<div class="btn-toolbar" role="toolbar" aria-label="...">
   <div class="btn-group" role="group" aria-label="...">
       <button type="button" class="btn btn-default">Kiri</button>
       <button type="button" class="btn btn-default">Tengah</button>
       <button type="button" class="btn btn-default">Kanan</button>
   </div>
   <div class="btn-group" role="group" aria-label="...">
       <button type="button" class="btn btn-default">1</button>
       <button type="button" class="btn btn-default">2</button>
       <button type="button" class="btn btn-default">3</button>
   </div>
</div>
Hasilnya seperti ini:

Sizing

Untuk mengubah ukuran button, kita perlu menambahkan .btn-group-* pada setiap .btn-group
Pilihan ukurannya adalah:
.btn-group-lg  = Ukuran besar
.btn-group-sm  = Ukuran sedang
.btn-group-xs  = Ukuran kecil
Untuk ukuran normal, kita tidak perlu memberi tambahan apa-apa
Contoh penerapannya:
<div class="btn-toolbar" role="toolbar" aria-label="...">
   <div class="btn-group btn-group-lg" role="group" aria-label="...">
       <button type="button" class="btn btn-default">Kiri</button>
       <button type="button" class="btn btn-default">Tengah</button>
       <button type="button" class="btn btn-default">Kanan</button>
   </div><br/>
<div class="btn-group" role="group" aria-label="...">
       <button type="button" class="btn btn-default">Kiri</button>
       <button type="button" class="btn btn-default">Tengah</button>
       <button type="button" class="btn btn-default">Kanan</button>
   </div><br/>
<div class="btn-group btn-group-sm" role="group" aria-label="...">
       <button type="button" class="btn btn-default">Kiri</button>
       <button type="button" class="btn btn-default">Tengah</button>
       <button type="button" class="btn btn-default">Kanan</button>
   </div><br/>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
       <button type="button" class="btn btn-default">Kiri</button>
       <button type="button" class="btn btn-default">Tengah</button>
       <button type="button" class="btn btn-default">Kanan</button>
   </div>
</div>
Hasilnya seperti ini:






Nesting

Bila kita ingin mencampurkan button dengan menu dropdown, kita perlu menempatkan .btn-group dengan .btn-group yang lain
Contoh penerapannya:
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      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>
Hasilnya:

Vertical Variation

Untuk menampilkan set button secara vertikal, gunakan .btn-group-vertical
Contoh penerapannya:
<div class="btn-group-vertical" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Button 1</button>
  <button type="button" class="btn btn-default">Button 2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown 1
      <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>
<button type="button" class="btn btn-default">Button 3</button>
  <button type="button" class="btn btn-default">Button 4</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown 2
      <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>
Hasilnya:


Justified button groups

Dengan elemen <a>
Contoh penerapannya:
<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-default">Apple</a>
  <a href="#" class="btn btn-default">Samsung</a>
  <a href="#" class="btn btn-default">Sony</a>
</div>
dan ini:
<div class="btn-group btn-group-justified">
  <a href="#" class="btn-default">Apple</a>
  <a href="#" class="btn btn-default">Samsung</a>
<div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      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>
Hasilnya:
dan ini:
Dengan elemen <button>
Contoh penerapannya:
 <div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Apple</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Samsung</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Sony</button>
  </div>
</div>
dan ini:
<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Apple</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Samsung</button>
  </div>
<div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      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>
Hasilnya:
dan ini:

Single button dropdowns

Contoh penerapannya:
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
Hasilnya:

Split button dropdowns

Contoh penerapannya:
<div class="btn-group">
  <button type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
Hasilnya:
Sampai disini sudah paham kan.. Kalau belum paham, pelajari dulu pelan-pelan. kalau sudah, kita akan lanjut pada pembahasan mengenai input groups. Silahkan baca disini. Semoga sukses

INFORMASI PENTING

Apabila ada script atau tips & trik yang tidak bisa digunakan, silahkan beritahu kami melalui kolom komentar atau email kami di psnpenting@gmail.com

papa wardi
papa wardi Updated at: 20:20

Kolom komentar adalah tempat untuk Tanya-Jawab, Kritik-Saran dan tempat untuk berbagi ilmu, BUKAN TEMPAT PROMOSI.
Maaf jika saya tidak bisa membalas satu per satu komentar sahabat semua. Harap maklum.

Copyright 2016 © papawardi