Home » Uncategories » Bootstrap : Mengatur tampilan button dan mengatur ukuran button dengan Bootstrap

Bootstrap : Mengatur tampilan button dan mengatur ukuran button dengan Bootstrap

Assalammualaikum Wr. Wb.

Kali ini saya akan sharing mengenai cara Mengatur tampilan button dan mengatur ukuran button pada Bootstrap. bagaimana caranya?. simak pembahasan berikut....

 A. PENDAHULUAN
  • Pengertian
Button merupakan sebuah tombol yang fungsinya menampilkan tampilan atau halaman lain.
  • Latar Belakang
Ingin mempercantik button dengan Bootstrap.
  • Maksud dan Tujuan
Dapat mengatur tampilan button dengan bootstrap.

B. ALAT DAN BAHAN
  • Text Editor.
  • Library Bootstrap.
  • Web Browser.
  • 1 Unit PC/Laptop.
C. JANGKA WAKTU PELAKSANAAN
  • sekitar 10 - 15 menit
D. RANGKAIAN KEGIATAN
  • Definisi Button
Button merupakan sebuah tombol yang fungsinya menampilkan tampilan atau halaman lain.
  • Cara menggunakan class untuk tombol
Bootstrap menyediakan beberapa class yang dapat digunakan untuk mengatur tampilan tombol atau button pada HTML, selain tampilan tombol, bootstrap juga menyediakan ukuran ukuran untuk tombolnya, dengan ini anda hanya perlu memanggil class awal yaitu btn dan dilanjutkan class lainnya.

berikut merupakan beberapa class yang digunakan untuk mengatur tampilan bootstrap :
  1. btn-danger digunakan untuk memberi warna merah atau biasanya melambangkan tombol "bahaya".
  2. btn-default digunakan untuk memberi warna standart bootstrap.
  3. btn-warning digunakan untuk memberi warna kuning atau biasanya melambangkan warna peringatan.
  4. btn-primary digunakan untuk memberi warna biru tua atau biasanya melambangkan sebagai sebuah kunci atau primary.
  5. btn-info digunakan untuk memberi warna biru muda atau biasanya melambangkan untuk tombol info.
  6. btn-success digunakan untuk memberi warna hijau atau biasanya melambangkan sebuah kesuksesan.

dan berikut merupakan class yang digunakan untuk mengatur ukuran tombol bootstrap
  1. btn-xs adalah class pada bootstrap yang digunakan untuk membuat tombol ukuran ekstra kecil.
  2. btn-sm digunakan untuk memberi ukuran tombol yang kecil.
  3. btn-md digunakan untuk memberi ukuran sedang pada tombol.
  4. btn-lg digunakan untuk memberi ukuran besar pada tombol.
berikut merupakan contoh penulisan tampilan untuk button bootstrap



diatas, saya menggunakan tag <a> dan tag <button> dan semuanya berhasil, anda dapat memilih satu diantaranya. hasil diatas jika dibuka pada browser, hasilnya seperti ini

 
 berikut merupakan contoh penulisan ukuran untuk button bootstrap




dan jika hasilnya ditampilkan di browser, maka tampilannya akan menjadi seperti ini...
E. HASIL YANG DIDAPATKAN
  • Dapat mengganti tampilan tombol atau button
F. TEMUAN PERMASALAHAN
  • Tidak Ada
G. KESIMPULAN
  • kita dapat mengatur ukuran tombol
  • kita terserha dapat menggunakan tag <button> maupun <a>
H. REFERENSI
  • W3Schools
  • MalasNgoding

Sekian sharing yang dapat saya sampaikan kali ini.....

Semoga Bermanfaat....

Wassalammualaikum Wr. Wb.


Subscribe to: Post Comments (Atom)