Mempelajari Button Groups di Bootstrap

10 Desember 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:
Apple Samsung Sony
dan ini:
Apple Samsung

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
author_photo
Author: SUWARDI

Silahkan share jika berkenan

papa wardi
papa wardi Updated at: Desember 10, 2016
,
Tidak ada komentar

Artikel Terkait

Tidak ada komentar:

Posting Komentar

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.

Disclaimer | Privacy Policy | Terms Of Service | Contact Us | About Me
Copyright 2022 © papawardi