Mengenal Sekaligus Menggunakan Bootstrap Buttons

Pembahasan ini akan menelusuri jenis dan bentuk gaya dari bootstrap, mungkin saja diantara kita ada yang belum mengetahui macam dan bentuknya gayanya, maka itu disini akan dibahas.

Pertama yang perlu kita ketahui, button bootstrap memiliki tuju macam dengan gaya warna yang berbeda-beda. Berikut adalah masing-masing button tersebut.

Button Style

| | | | | |

Kumpulan button diatas merupakan bentuk dan gaya dengan ukuran normal, tidak perlu menambahkan CSS properti jika ingin menggunakan bawaan asli dari bootstrap. Cara penggunaanya mudah tanpa memerlukan skill yang master.

Contoh penggunaan kode tersebut seperti berikut.

• class .btn-default

<button class="btn btn-default" type="button">Button Default</button>

• class .btn-primary

<button class="btn btn-primary" type="button">Button Primary</button>

• class .btn-success

<button class="btn btn-success" type="button">Button Success</button>

• class .btn-info

<button class="btn btn-info" type="button">Button Info</button>

• class .btn-warning

<button class="btn btn-warning" type="button">Button Warning</button>

• class .btn-danger

<button class="btn btn-danger" type="button">Button Danger</button>

• class .btn-link

<button class="btn btn-link" type="button">Button Link</button>

*Semua class button tersebut dapat digunakan pada elemen <a>, <button>, dan <input>.

Button Size

Bootstrap memiliki ukuran button dari besar, sedang, kecil, dan paling kecil. tambahkan class .btn-lg, .btn-md, .btn-sm, dan terakhir paling kecil .btn-xs setelah menambahkan class dengan ukurang yang inginkan kemudian outpun akan menampilkan ukuran yang berbeda.

Contoh,....

| | |

<button class="btn btn-info btn-lg" type="button">Button Info Besar</button>

Button Block

Button block secara garis besarnya akan ngeblock dengan ukuran kolom dan sejenisnya. contoh...

diatas dengan class .btn-block sebagai contoh dan negeblock seluruh lebar halaman dan akan menyesuaikan lebar tersebut.