Grup tombol
Bootstrap memungkinkan Anda untuk kelompok serangkaian tombol bersama-sama (pada satu baris) dalam kelompok tombol:
Gunakan <div> elemen dengan kelas .btn-group untuk 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> Cobalah sendiri " Tip: Daripada menerapkan tombol ukuran untuk setiap tombol dalam kelompok, menggunakan kelas .btn-group-* ukuran semua tombol dalam kelompok:
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> Cobalah sendiri " Grup Tombol vertikal
Bootstrap juga mendukung kelompok tombol vertikal:
Menggunakan kelas .btn-group-vertical untuk 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> Cobalah sendiri " Grup Tombol dibenarkan
Span seluruh lebar layar, gunakan .btn-group-justified kelas:
Misalnya 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> Cobalah sendiri " Catatan: Untuk <button> elemen, Anda harus membungkus setiap tombol di .btn-group kelas:
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> Cobalah sendiri " Nesting Tombol Grup & Dropdown Menu
kelompok tombol sarang untuk membuat menu dropdown:
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> Cobalah sendiri " Dropdown Tombol Berpisah
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> Cobalah sendiri " Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »