Wednesday, April 5, 2017

Bootstrap Chapter 4 - Membuat Tombol Button

  No comments



MEMBUAT TOMBOL DENGAN BOOTSTRAP

Selain mampu membuat tabel, Bootstrap juga memiliki fungsi untuk membuat tombol yang responsive dan terlihat modern. Untuk membuat tombol cukup mudah hanya memberikan class "btn" untuk mendefinisikan element. Kemudian kita tinggal mengatur warna element yang kita inginkan.

Bootstrap menyediakan beberapa class untuk membuat tombol yang responsive dan menarik. Adapun beberapa class yang digunakan untuk membuat tombol dan mengatur warna tombolnya dengan Bootstrap

  • .btn : Merupakan class Bootstrap yang digunakan untuk menbuat tombol
  • .btn-xs : Digunakan untuk membuat tombol dengan ukuran extra kecil
  • .btn-sm : Digunakan untuk membuat tombol dengan ukuran kecil
  • .btn-md : Digunakan untuk membuat tombol dengan ukurang sedang
  • .btn-lg : Digunakan untuk membuat tombol dengan ukuran besar
  • .btn-danger : Digunakan untuk membuat tombol berwarna merah
  • .btn-warning : Digunakan untuk membuat tombol berwarna kuning
  • .btn-success : Digunakan untuk membuat tombol berwarna hijau
  • .btn-primary : Digunakan untuk membuat tombol berwarna biru
  • .btn-info : Digunakan untuk membuat tombol berwarna biru muda
  • .btn-default : Digunakan untuk membuat tombol dengan warna standart bootstrap yaitu berwarna abu - abu
CARA MEMBUAT TOMBOL DENGAN BOOTSTRAP
Untuk membuat tombol dengan Bootstrap sobat dapat menggunakan tag <button> atau juga bisa menggunakan tag <a> alias hyperlink dan menyisipkan class Button pada Bootstrap. Berikut ini contoh penggunaan class - class Bootstrap yang telah dijelaskan diatas.



Perhatikan pada contoh diatas saya memberikan class "btn" pada tag <a> agar tombol Bootstrap berjalan. dan dibelakangnya saya berikan "btn-success" untuk merubah warnanya menjadi hijau dan "btn-lg" untuk mengatur ukuran dari tombol tersebut.

KESIMPULAN
Jadi untuk membuat tombol dengan Bootstrap kita dapat menggunakan class "btn" dan dapat kita atur warna dan ukuranya seperti yang sudah saya jelaskan diatas. Nah saya kira sampai sini saja artikel kali ini jika ada pertanyaan silahkan berikan Komentar, Sekian Terima Kasih

REFERENSI : Malas Ngoding

No comments :

Post a Comment