Tombol Bootstrap
Gaya Tombol
Bootstrap menyediakan gaya tombol yang berbeda:
Untuk mencapai gaya tombol di atas, Bootstrap memiliki kelas-kelas berikut:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
Contoh berikut menunjukkan kode untuk gaya tombol yang berbeda:
Contoh
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
Kelas tombol dapat digunakan pada elemen <a>, <button>, atau
<input>:
Contoh
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Mengapa kami menempatkan # di atribut href dari tautan?
Karena kami tidak memiliki halaman untuk ditautkan, dan kami tidak ingin mendapatkan pesan "404", kami menempatkan # sebagai tautan dalam contoh kami. Itu harus berupa URL asli ke halaman tertentu.
Ukuran Tombol
Bootstrap menyediakan empat ukuran tombol:
Kelas-kelas yang menentukan ukuran yang berbeda adalah:
.btn-lg.btn-sm.btn-xs
Contoh berikut menunjukkan kode untuk ukuran tombol yang berbeda:
Contoh
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Blok Tombol Level
Tombol level blok mencakup seluruh lebar elemen induk.
Tambahkan kelas .btn-blockuntuk membuat tombol level blok:
Contoh
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Tombol Aktif/Dinonaktifkan
Tombol dapat diatur ke status aktif (tampak ditekan) atau dinonaktifkan (tidak dapat diklik):
Kelas .activemembuat tombol tampak ditekan, dan kelas
.disabled
membuat tombol tidak dapat diklik:
Contoh
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Referensi Tombol Bootstrap Lengkap
Untuk referensi lengkap semua kelas tombol, buka Referensi Tombol Bootstrap lengkap kami .