Home Design Web Cara Membuat Button Responsive pada Bootstrap

Thursday, August 2, 2018

Cara Membuat Button Responsive pada Bootstrap

Cara Membuat Button Responsive pada Bootstrap – Setelah kita Membuat Progress Bars pada Bootstrap, Membuat Navbar dan lainnya, kali ini kita akan membuat dan mendesain button pada Bootstrap. Kita hanya akan menambahkan class btn bawaan Bootstrap untuk mendefinisikan elemen menjadi button.

 Teks atau konten di dalam button merupakan label dari elemen button tersebut. Di dalamnya juga bisa kita tambahkan gambar atau icon dari Font Awesome sebagai tampilan tombol tersebut. Bootstrap menyediakan berbagai gaya untuk tombol sehingga kita bisa mengatur ukuran serta warna dari tombol tersebut.

Cara Membuat Button Responsive pada Bootstrap

Sekarang mari kita coba membuat button pada Bootstrap. Buat file HTML lalu pastekan kode berikut,
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Button pada Bootstrap | codelatte.org</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="css/bootstrap.min.css">
  8. <script src="js/jquery.min.js"></script>
  9. <script src="js/popper.min.js"></script>
  10. <script src="js/bootstrap.min.js"></script>
  11. </head>
  12. <body>
  13. <div class="container">
  14. <h2>Button pada Bootstrap | codelatte.org</h2>
  15. <button type="button" class="btn">Basic</button>
  16. <button type="button" class="btn btn-primary">Primary</button>
  17. <button type="button" class="btn btn-secondary">Secondary</button>
  18. <button type="button" class="btn btn-success">Success</button>
  19. <button type="button" class="btn btn-info">Info</button>
  20. <button type="button" class="btn btn-warning">Warning</button>
  21. <button type="button" class="btn btn-danger">Danger</button>
  22. <button type="button" class="btn btn-dark">Dark</button>
  23. <button type="button" class="btn btn-light">Light</button>
  24. <button type="button" class="btn btn-link">Link</button>
  25. </div>
  26. </body>
  27. </html>
Maka hasilnya akan menjadi seperti ini,
Class button dapat digunakan pada elemen <a>, <button&gt; dan/atau <input>, lihat contoh berikut:
  1. <a href="#" class="btn btn-info" role="button">Link Button</a>
  2. <button type="button" class="btn btn-info">Button</button>
  3. <input type="button" class="btn btn-info" value="Input Button">
  4. <input type="submit" class="btn btn-info" value="Submit Button">

Button Outline

Bootstrap 4 juga menyediakan 8 jenis border atau batas pada button:
  1. <button type="button" class="btn btn-outline-primary">Primary</button>
  2. <button type="button" class="btn btn-outline-secondary">Secondary</button>
  3. <button type="button" class="btn btn-outline-success">Success</button>
  4. <button type="button" class="btn btn-outline-info">Info</button>
  5. <button type="button" class="btn btn-outline-warning">Warning</button>
  6. <button type="button" class="btn btn-outline-danger">Danger</button>
  7. <button type="button" class="btn btn-outline-dark">Dark</button>
  8. <button type="button" class="btn btn-outline-light text-dark">Light</button>

Ukuran Button

Selain border atau batas, Bootstrap menyediakan 4 jenis ukuran yang berbeda untuk button:
  1. <button type="button" class="btn btn-primary btn-lg">Besar</button>
  2. <button type="button" class="btn btn-primary">Default</button>
  3. <button type="button" class="btn btn-primary btn-sm">Kecil</button>

Full-Width Button

Tambahkan .btn-block untuk membuat tombol yang membentan ke seluruh elemen induk (full-width button).
  1. <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>

Attribut

Elemen button memiliki beberapa atribut, atribut ini sudah support untuk HTML5. Beberapa atribut itu adalah:
  • autofocus > Digunakan untuk menentukan bahwa button mendapat fokus ketika halaman dimuat.
  • disabled > Digunakan untuk menunjukkan bahwa elemen button tersebut tidak bisa diklik.
  • formaction > Digunakan untuk menentukan URL yang memproses data ketika form dikirim. Berlaku untuk atribut type="submit".
  • formenctype > Digunakan sebagai petunjuk form encoded type yang digunakan untuk menentukan tipe konten yang digunakan.
  • formmethod > Digunakan untuk menentukan HTTP Method yang digunakan browser ketika mengirim data form.
  • formtarget > Digunakan untuk menentukan target tampilan setelah data form dikirim.
  • name > Digunakan untuk  menentukan nama dari button yang berkaitan dengan form yang dikirim.
  • type > Digunakan untuk menentukan tipe atau jenis dari button.
  • value > Digunakan untuk menentukan initial value sebuah button.
Sekian artikel tentang Cara Membuat Button Responsive pada Bootstrap.Apabila ada yang ingin ditanyakan, silahkan tinggalkan pertanyaan di kolom komentar. Semoga bermanfaat dan sampai jumpa pada artikel selanjutnya! 


https://codelatte.org/



Cara Membuat Button Responsive pada Bootstrap Cara Membuat Button Responsive pada Bootstrap MasIrfun 5.0 stars based on 35 reviews Cara Membuat Button Responsive pada Bootstrap  – Setelah kita  Membuat Progress Bars pada Bootstrap , Membuat Navbar dan lainnya, kali ini k...
Share this with short URL Get Short URLloading short url

Related Posts

Next Post
Previous Post

1 comments

avatar
Balas
linkalternatifjudionline delete June 20, 2020 at 11:32 AM

untuk bisa mendapatkan kemenangan dalam bermain Live Casino online 3D SHIO, ROULETTE. SICBO, BACCARAT, kalian diperlukan ketenangan serta kemahiran yang cukup tinggi, tidak hanya itu kalian juga perlu mencari panduan bermain judi online yang benar, nah kalian bisa menemukannya di www.livetogel99.blogspot.com


EmoticonEmoticon

Subscribe to: Post Comments (Atom)