Grup Tombol Bootstrap
Grup Tombol
Bootstrap memungkinkan Anda untuk mengelompokkan serangkaian tombol bersama-sama (dalam satu baris) dalam grup tombol:
Gunakan <div>elemen dengan kelas .btn-groupuntuk membuat grup tombol:
Contoh
<div class="btn-group">
<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>
Tip: Daripada menerapkan ukuran tombol ke setiap tombol dalam grup, gunakan kelas .btn-group-lg|sm|xsuntuk mengukur semua tombol dalam grup:
Contoh
<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>
Grup Tombol Vertikal
Bootstrap juga mendukung grup tombol vertikal:
Gunakan kelas .btn-group-verticaluntuk membuat grup tombol vertikal:
Contoh
<div class="btn-group-vertical">
<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>
Grup Tombol yang Dibenarkan
Untuk merentangkan seluruh lebar layar, gunakan .btn-group-justified
kelas:
Contoh dengan <a>elemen:
Contoh
<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>
Catatan: Untuk <button>elemen, Anda harus membungkus setiap tombol di .btn-groupkelas:
Contoh
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
Grup Tombol Bersarang & Menu Dropdown
Grup tombol sarang untuk membuat menu tarik-turun:
Contoh
<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>
Dropdown Tombol Split
Contoh
<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>