6 Hal Penting yang Berkaitan dengan Tombol Bootstrap

Membuat tombol di HTML biasanya menggunakan tag button atau membuatnya dari tag a, mungkin ada beberapa juga yang menggunakan span dan tag HTML lainnya. Tapi, ketika menggunakan Bootstrap membuat tombol akan jadi lebih mudah.

Seperti biasa, tersedia beberapa jenis tombol pada Bootstrap yang dapat digunakan. Kamu dapat menampilkan tombol di situs web / blog hanya dengan menggunakan class btn dan type button, tapi untuk mengetahui lebih lanjut mengenai tombol Bootstrap bisa baca post ini sampai selesai.

5 Hal yang Perlu Diketahui Tentang Tombol Bootstrap

5 hal ini sepertinya jarang digunakan bersamaan dalam satu halaman, tapi setidaknya kita harus mengetahui hal-hal yang berkaitan dengan tombol Bootstrap agar lebih memahami bagaimana cara kerja class btn pada type HTML yang digunakan.

• Basic Button

Pada dasarnya, untuk membuat tombol Bootstsrap cukup menggunakan class btn saja. Untuk awal percobaan, mari kita buat tombol menggunakan class btn di dalam tag button.

<button type="button" class="btn">Tombol Basic</button>

Ini adalah kode yang digunakan jika ingin membuat tombol pada Bootstrap, simpan dan lihat hasilnya !

• Button with Contextual Classes

Seperti yang kita ketahui dan pernah di bahas beberapa kali di beberapa postingan terakhir mengenai Bootstrap, kamu dapat menggunakan contextual classes ke dalam class Bootstrap lainnya agar menampilkan warna-warna yang tersedia di Bootstrap.

1. btn (abu-abu)
2. default (putih / dasar)
3. primary (biru)
4. success (hijau)
5. info (biru muda)
6. warning (oranye)
7. danger (merah)
8. link (menampilkan link)

Link dimasukkan oleh Bootstrap sebagai contextual classes karena kegunaannya yang flexibel, ini masih baru, tapi sudah berfungsi dengan baik. Untuk masalah warna latar, kamu dapat mempelajarinya di contextual classes Bootstrap backgrounds.

Contextual classes ini dapat digunakan bersamaan dengan class btn, sehingga dapat menampilkan warna-warna yang tersedia di Bootstrap yang sesuai. Contoh:

<h2>Tombol Bootstrap - Posciety</h2>
  <button type="button" class="btn">Tombol Basic</button>
  <button type="button" class="btn btn-default">Tombol Default</button>
  <button type="button" class="btn btn-primary">Tombol Primary</button>
  <button type="button" class="btn btn-success">Tombol Success</button>
  <button type="button" class="btn btn-info">Tombol Info</button>
  <button type="button" class="btn btn-warning">Tombol Warning</button>
  <button type="button" class="btn btn-danger">Tombol Danger</button>
  <button type="button" class="btn btn-link">Tombol Link</button>

Terliaht jelas di kodingan ini terdapat class btn-(nama contextual classes), misalnya btn-danger. Perlu diperhatikan, class btn saja (tanpa contextual classes) juga perlu dimasukkan agar bekerja dengan baik. Dari kodingan di atas, akan menampilkan tombol-tombol indah seperti ini:

• Ukuran Tombol

Seperti yang pernah dijelaskan sebelumnya dalam pembahasan tentang membuat website menggunakan Bootstrap, pernah kita bahas sedikit mengenai lebar dan kecilnya ukuran tombol Bootstrap. Mari kita ketahui lebih jauh disini !

Terdapat 4 tingkatan ukuran yang dapat digunakan pada Bootstrap, diantaranya:

1. large (besar)
2. medium (sedang)
3. small (kecil)
4. xsmall (kecil sekali)

Size ini dapat digunakan pada tombol, seperti yang pernah dijelaskan di postingan-postingan tentang Bootstrap sebelumnya bahwa ukuran pada Bootstrap itu ditandai dengan xs (xtra small), sm (small), md (medium), dan lg (large). Ini adalah salah satu contoh sederhananya:

Seperti ini kodingan yang digunakan untuk membuat tombol seperti contoh di atas:

<h2>Ukuran Tombol Bootstrap - Posciety</h2>
<button type="button" class="btn btn-primary btn-xs">Paling Kecil</button>
<button type="button" class="btn btn-info btn-sm">Kecil</button>
<button type="button" class="btn btn-warning btn-md">Sedang</button>
<button type="button" class="btn btn-danger btn-lg">Besar</button>

Kombinasikan juga dengan warna-warna yang sudah dijelaskan di atas agar tombol terlihat lebih menarik.

• Status Tombol

Mungkin diantara kalian ada yang pernah menggunakan status Bootstrap (Bootstrap States) yang terdiri dari Tidak Aktif, Aktif, dan Tidak Dapat Diganggu. Ini juga dapat dimanfaatkan pada tombol, biasanya disebut Button States.

Gambar ini merupakan salah satu contoh sederhana Button States, tombol sebelah kiri adalah tombol biasa, tombol yang ditengah adalah tombol yang sedang aktif, dan tombol merah adalah tombol yang tidak dapat diklik.

Kamu harus mengetahui states ini jika membangung Bootstrap, karena pada beberapa kondisi ini sangat diperlukan. Seperti yang terlihat pada gambar di atas, tombol aktif cenderung lebih menusuk ke dalam yang menandakan bahwa tombol itu sedang aktif ditekan, dan tombol tidak aktif akan membuat pointer mouse berubah menjadi unclickable (tidak dapat diklik).

Tidak sulit untuk memahami states ini, class active digunakan untuk tombol yang ingin diatur menjadi aktif, class disabled digunakan untuk mengatur tombol agar tidak dapat diklik. Seperti ini contohnya:

<h2>Bootstrap Button States - Posciety</h2>
<button type="button" class="btn btn-default">Tombol Biasa</button>
<button type="button" class="btn btn-default active">Tombol Aktif</button>
<button type="button" class="btn btn-danger disabled">Tidak Dapat Diklik</button>

• Elemen Tombol

Apakah untuk membuat tombol di Bootstrap hanya dapat dibuat menggunakan elemen / tag button ? TIDAK ! Kam udapat membuat tombol Bootstrap dengan beberapa elemen HTML lain, diantaranya:

1. a href=”” (biasanya digunakan jika ingin menggabungkan link di dalam tombol)
2. input type=”submit” (biasanya digunakan untuk mengirim submission formulir)
3. input type=”button” (biasanya digunakan di dalam formulir)
4. button (default dari tombol Bootstrap)

Masih bingung ? Berikut ini contoh penggunaan masing-masing elemen yang disebutkan di atas:

<h2>Elemen / Tag Tombol Bootstrap - Posciety</h2>
<button type="button" class="btn btn-primary">BIASA</button>
<input type="button" class="btn btn-warning" value="Tombol Input">
<input type="submit" class="btn btn-default" value="Tombol Submit">
<a href="#" class="btn btn-danger" role="button">Tombol Link</a>

Tidak perlu terpaku dengan struktur kode ini, pada dasarnya penggunaan tombol ini tergantung keperluan dari selera karena tidak ada pengaruh apa-apa pada tampilan.

• Full-Width Button

Tombol-tombol Bootstrap yang dijelaskan di atas merupakan ukuran (panjang) tombol default yang biasa digunakan, jika berpikiran untuk membuat dengan lebar penuh full layar atau pembungkus silahkan gunakan class btn-block. Seperti ini contohnya:

<h2>Block Button Bootstrap - Posciety</h2>
<button type="button" class="btn btn-danger btn-block">Tombol Full 1</button>
<button type="button" class="btn btn-default btn-block">Tombol Full 2</button>

Maka akan tampil seperti ini:

Sesuaikan ukuran tombol seperti yang dijelaskan pada bagian Button Size di atas.

Itulah beberapa hal penting yang perlu diketahui dalam membuat tombol pada Bootstrap, setelah memahami ini semua, seharusnya membuat tombol Bootstrap bukanlah hal yang sulit lagi bahkan untuk kustomisasi.