Latihan Bootstrap Pada Button Dengan JQuery

KELUARGA IT – Pada tutorial kali ini keluargaIT akan berbagi tentang pemakaian bootstrap pada Button dengan JQuery yang hasilnya ketika di klik button tersebut akan tersembunyi.

Ikuti Langkah – Langkah berikut ini :

  • Download Bootstrap saat ini v4 https://getbootstrap.com/
  • ekstrak File ZIP Bootstrap yang berisi 2 folder (css dan js)

    Ekstrak File ZIP Bootstrap hasil download
  • Buat folder latihan_dua pada Ampps\www\ atau xampp\htdocs\
  • Pastekan folder css dan js ke folder latihan_dua
  • Download jquery.min.js di url : http://jquery.com/download/ jika hasil download ada versi jquery silahkan di ubah menjadi jquery.min.js dan letakan di folder js (latihan_dua/js)
    Tampilan struktur folder file jquery.min.js pada folder js
  • Buat file index.php pada folder latihan_dua

    disini di praktekan menggunakan editor sublime text (bisa pakai notepad++, dll)
  • disini di praktekan menggunakan editor sublime text (bisa pakai notepad++, dll)
  • isi dari file index.php memanggil css/bootstrap.min.css dan pembuatan script button bootstrap dengan memanggil class btn btn-success :

    Script untuk Memanggil File Bootstrap.min.js didalam folder css
  • Jalankan dengan mengetikan URL pada browser localhost/latihan_dua

    hasil latihan bootstrap button
  • Di atas sudah terlihat file bootstrap.min.css sudah terpanggil href nya dan class button btn btn-success sudah berjalan dengan hasil seperti di atas.
  • Sekarang menjalankan fungsi button hide/tersembunyi saat di klik dengan menambahkan script garis di tandai dengan warna merah di bawah ini :

    Memanggil file jquery.min.js
  • Refresh browser dengan menekan tombol F5 atau ctrl+F5 dan di klik button akan menghasilkan hasil seperti di bawah ini :

    Berhasil ketika button di klik maka button akan hide/tersembunyi

Selesai dan Tunggu Tutorial Selanjutnya dari Keluarga IT (wto)

Leave a Reply

Your email address will not be published. Required fields are marked *