tRikSonic
Tema
/ / Bootstrap 3 Button Group - Tutorial Bootstrap Indonesia
Informasi : saat ini anda mengakses blog ini untuk halaman yang di percepat penggunaannya untuk mobile/handphone (AMP) atau akses mobile dengan kecepatan internet yang rendah, mungkin beberapa fitur diblog ini belum tersedia, silahkan ganti Thema untuk mengaktifkan beberapa fitur lainnya. Terimakasih

Bootstrap 3 Button Group - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.40
/ / Bootstrap 3 Button Group - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Button Group

Button group pada Bootstrap digunakan untuk megelompokkan beberapa tombol atau button kesatu wadah container/pembungkus.

Cara Penggunaan Button Group

Untuk menerapkan button group gunakan element HTML <div> dengan nama class .btn-group : <div class="btn-group">...</div>.

Contoh :

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

Ukuran Button Group

Untuk menentukan ukuran button pada button group, tambahkan class .btn-group-xs, .btn-group-sm atau .btn-group-lg pada container.
  • .btn-group-xs : paling kecil
  • .btn-group-sm : kecil
  • .btn-group-lg : besar

Contoh :

<h3>Normal</h3>
<div class="btn-group">
  <button class="btn btn-default">Button</button>
  <button class="btn btn-default">Button</button>
  <button class="btn btn-default">Button</button>
</div>

<h3>.btn-group-xs</h3>
<div class="btn-group btn-group-xs">
  <button class="btn btn-success">Button</button>
  <button class="btn btn-success">Button</button>
  <button class="btn btn-success">Button</button>
</div>

<h3>.btn-group-sm</h3>
<div class="btn-group btn-group-sm">
  <button class="btn btn-info">Button</button>
  <button class="btn btn-info">Button</button>
  <button class="btn btn-info">Button</button>
</div>

<h3>.btn-group-lg</h3>
<div class="btn-group btn-group-lg">
  <button class="btn btn-danger">Button</button>
  <button class="btn btn-danger">Button</button>
  <button class="btn btn-danger">Button</button>
</div>

Vertical Button Group

Untuk membuat button secara vertical gunakan class .btn-group-vertical pada container

Contoh :

<div class="btn-group-vertical">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <button class="btn btn-primary">Button 3</button>
  <button class="btn btn-primary">Button 4</button>
  <button class="btn btn-primary">Button 5</button>
</div>

Justified Button Group

Digunakan untuk membuat lebar pada button otomatis menyesuaikan dengan lebar kiri dan kanan container. Perhitungannya ; (Lebar container dibagi jumlah button = lebar button per 1 button)
Untuk menerapkannya tambahkan class .btn-group-justified pada container

Contoh :

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Button 1</a>
  <a href="#" class="btn btn-primary">Button 2</a>
  <a href="#" class="btn btn-primary">Button 3</a>
</div>

<br/>

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-danger">Button 1</a>
  <a href="#" class="btn btn-danger">Button 2</a>
  <a href="#" class="btn btn-danger">Button 3</a>
  <a href="#" class="btn btn-danger">Button 4</a>
</div>
Tips : untuk penerapan mennggunkan element <button> caranya sebagai berikut : 
<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button class="btn btn-info">Button 1</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-info">Button 2</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-info">Button 3</button>
  </div>
</div>

Button Group Dropdown Menu

Untuk membuat dropdown menu pada button, gunakan contoh berikut :

Contoh 1 Button Group Dropdown Menu:

<div class="btn-group">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle active" data-toggle="dropdown">
    Menu <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>
  <button class="btn btn-primary">Button 4</button>
</div>

Contoh 2 Button Group Dropdown Menu:

<div class="btn-group">
  <button class="btn btn-danger">Menu</button>
  <button class="btn btn-danger dropdown-toggle active" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 1</a></li>
  </ul>
</div>

Contoh 3 Button Group Dropdown Menu:

<div class="btn-group">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <button class="btn btn-primary">Button 3</button>
  <div class="btn-group">
  <button class="btn btn-primary">Button 4</button>
  <button class="btn btn-primary active dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
  </div>
</div>

Contoh 4 Button Group Dropdown Menu:

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-default">Menu 1</button>
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </div>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-primary">Menu 2</button>
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </div>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-info">Menu 3</button>
    <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </div>
</div>

Button Group DropUp Menu

Untuk membuat dropup menu pada button, gunakan contoh berikut :

Contoh 1 Button Group DropUp Menu:

<div class="btn-group dropup">
  <button class="btn btn-default">DropUp Menu</button> 
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
  </button> 
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li class="divider"></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>

Contoh 2 Button Group DropUp Menu:

<div class="btn-group dropup">
  <button class="btn btn-default">DropUp Menu</button> 
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
  </button> 
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li class="divider"></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>

Tidak ada komentar

Add New Comment
Postingan Lebih BaruBerandaPostingan Lama