Bootstrap 4 Tombol
Gaya Tombol
Bootstrap 4 menyediakan gaya tombol yang berbeda:
Contoh
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Kelas tombol dapat digunakan pada <a>, <button>, atau
<input>elemen:
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 tautannya. Dalam kehidupan nyata, tentu saja itu adalah URL asli ke halaman "Pencarian".
Garis Besar Tombol
Bootstrap 4 menyediakan delapan tombol garis besar/berbatas:
Contoh
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
Ukuran Tombol
Gunakan .btn-lgkelas untuk tombol besar atau .btn-smkelas untuk tombol kecil:
Contoh
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Blok Tombol Level
Tambahkan kelas .btn-blockuntuk membuat tombol level blok yang mencakup seluruh lebar elemen induk.
Contoh
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
Tombol Aktif/Dinonaktifkan
Tombol dapat diatur ke status aktif (tampak ditekan) atau dinonaktifkan (tidak dapat diklik):
Kelas .activemembuat tombol tampak ditekan, dan disabledatribut membuat tombol tidak dapat diklik. Perhatikan bahwa elemen <a> tidak mendukung atribut yang dinonaktifkan dan oleh karena itu harus menggunakan .disabledkelas untuk membuatnya tampak dinonaktifkan secara visual.
Contoh
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
Tombol Pemintal
Anda juga dapat menambahkan "pemintal" ke tombol, yang akan Anda pelajari lebih lanjut di Tutorial Pemintal BS4 kami :
Contoh
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>