BS Button Goups - Bootstarp Learn

Boostrap Button Groups

Button Group

Bootstrap memungkinkan Anda untuk mengelompokkan serangkaian tombol bersama-sama (dalam satu baris) dalam grup tombol :

Note : Daripada menerapkan ukuran tombol ke setiap tombol dalam grup, gunakan kelas .btn-group-lg|sm|xs untuk mengukur semua tombol dalam grup :

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Vertical Button Groups

Bootstrap juga mendukung grup tombol vertikal :

<div class="btn-group-vertical btn-group-vertical-l">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Justified Button Groups

Untuk merentangkan seluruh lebar layar, gunakan .btn-group-justified kelas :

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

Nesting Button Groups & Dropdown Menus

Grup tombol sarang untuk membuat menu tarik-turun :

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

Split Button Dropdowns

<div class="btn-group">

  <button type="button" class="btn btn-primary">Sony</button>

  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

    <span class="caret"></span>

  </button>

  <ul class="dropdown-menu" role="menu">

    <li><a href="#">Tablet</a></li>

    <li><a href="#">Smartphone</a></li>

  </ul>

</div>

>_ Sekian kalo ada salah mohon dikoreksi