Membuat Button dengan Bootstrap
Button adalah bagian integral dari situs web dan aplikasi. Mereka digunakan untuk berbagai keperluan seperti, submit atau mereset form HTML, melakukan tindakan interaktif seperti menunjukkan atau menyembunyikan sesuatu di halaman web dengan mengklik tombol, mengarahkan pengguna ke halaman lain, dan sebagainya. Bootstrap menyediakan cara yang cepat dan mudah untuk membuat dan meng-customize button.
Bootstrap Button Style
Kelas yang berbeda tersedia di Bootstrap untuk menata tombol serta untuk menunjukkan status atau semantik yang berbeda. Button style dapat diterapkan ke elemen apa pun. Namun, ini diterapkan secara normal ke elemen <a>, <input>, dan <button> untuk rendering.
Contoh berikut akan menunjukkan kepada kalian cara membuat berbagai button syle di Bootstrap:
<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-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</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>
Output dari contoh di atas akan terlihat seperti ini:
Bootstrap Outline Button
Kalian juga dapat membuat outline button dengan mengganti kelas button modifier, seperti ini:
<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-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-light">Light</button>
Output dari contoh di atas akan terlihat seperti ini:
Mengubah Ukuran Button
Bootstrap memberi kalian opsi lebih lanjut untuk memperbesar button ke atas atau ke bawah. Kalian dapat membuat button lebih besar atau lebih kecil dengan menambahkan kelas tambahan .btn-lg atau .btn-sm, seperti ini:
<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>
Output dari contoh di atas akan terlihat seperti ini:
Kalian juga dapat membuat button level blok (tombol yang menutupi lebar penuh elemen induk) dengan menambahkan kelas tambahan .btn-blok ke tombol, seperti ini:
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
Output dari contoh di atas akan terlihat seperti ini:
Bootstrap Disabled Button
Terkadang kita perlu menonaktifkan button untuk alasan tertentu, misalnya, pengguna (user) jika tidak memenuhi syarat untuk melakukan tindakan khusus ini, atau kami ingin memastikan bahwa pengguna harus melakukan semua tindakan lain yang diperlukan sebelum melanjutkan ke tindakan khusus ini.
Membuat Disabled Button Menggunakan Button dan Input Elemen
Button yang dibuat melalui tag <button> atau <input> dapat dinonaktifkan dengan menambahkan atribut disabled ke masing-masing elemen, seperti yang ditunjukkan pada contoh berikut:
<button type="button" class="btn btn-primary btn-lg" disabled>Primary button</button> <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
Output dari contoh di atas akan terlihat seperti ini:
Membuat Disabled Button Menggunakan Element Anchor
Button yang dibuat melalui tag <a> dapat dinonaktifkan (disabled) dengan menambahkan kelas .disabled, seperti ini:
<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a> <a href="#" class="btn btn-secondary btn-lg disabled">Link</a>
Output dari contoh di atas akan terlihat seperti ini:
Catatan: Kelas .disabled hanya membuat tautan (link) secara visual tampak seperti dinonaktifkan, namun tautan itu akan tetap dapat diklik kecuali kalian menghapus atribut href dari hal tersebut. Atau, kalian dapat menerapkan custom JavaScript untuk mencegah klik tersebut.
Bootstrap Active Button
Selain itu, kalian juga dapat menerapkan kelas .active untuk memaksa tombol-tombolnya terlihat aktif (mis. Ketika ditekan). Biasanya kalian tidak perlu menambahkan kelas ini ke dalam button, karena keadaan aktif mereka secara otomatis ditata oleh Bootstrap menggunakan CSS :active pseudo-class. Berikut contohnya:
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a> <a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
Output dari contoh di atas akan terlihat seperti ini:
Membuat Spinner Button
Dengan Bootstrap kalian dapat dengan mudah memasukkan ikon spinner dalam sebuah button untuk menunjukkan status pemuatan di aplikasi kalian. Lihat contoh berikut untuk melihat cara kerjanya:
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
</button>
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span> Loading...
</button>
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span> Loading...
</button>
