Tutorial Pemrograman

Cara Membuat Alert Show dengan Bootstrap

Bootstrap adalah suatu pustaka CSS Framework yang didesain untuk mempercantik tampilan dalam produktifitas website. Bootstrap ini memiliki kumpulan kode script yang telah siap dipakai untuk merancang tampilan website sehingga si web programmer tidak perlu membuat kode perintah CSS dari nol. Bootstrap merupakan salah satu CSS Framework yang populer bagi web programmer frontend pada saat ini.

Ternyata, Bootstrap ini ada juga pustaka JS Framework. Nah, Bootstrap JS Framework ini bisa dijadikan sebagai alternatif dari JQuery dalam membuat tampilan antar-muka pada website tersebut.

Dengan adanya Bootstrap ini, maka si web programmer diharapkan mudah dalam membuat atau merancang tampilan website sesuai kebutuhan. Alert show atau tampilan peringatan berguna untuk menyampaikan suatu informasi yang bersifat penting.

Penulis akan berikan tutorial cara membuat alert box dengan Bootstrap, yang dimana akan berguna untuk menyampaikan informasi yang penting kepada pengunjung (visitor) pada akses website kita. Misalkan, kamu membuat website toko online, perusahaan, personal, pendidikan, dan sebagainya. Dan kamu bisa membuat sistem website yang bisa diakses pada pihak-pihak yang tertentu.

Berikut cara membuat Alert Show dengan Bootstrap.

Langkah:

1. Silahkan aktifkan teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “alert-show-bootstrap.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

Lihat hasilnya.

Selesai.

Catatan:

Tampilan alert box pada Bootstrap memiliki fungsi masing-masing yang berdasarkan tipenya. Kamu bisa memilih tipe tampilan alert box ini sesuai dengan fungsinya.

  • alert alert-success, alert show yang mengindikasikan dalam pernyataan atau kalimat yang positif.
  • alert alert-info, alert show yang mengindikasikan dalam pernyataan atau kalimat yang informatif.
  • alert alert-warning, alert show yang mengindikasikan dalam pernyataan atau kalimat yang perhatian.
  • alert alert-danger, alert show yang mengindikasikan dalam pernyataan atau kalimat yang negatif.

Setelah dipilih, kamu bisa ganti kode script di bawah ini.

“<div class=”nama_tipe_alert_box”> <strong>Sukses!</strong> Pengisian data formulir kamu selesai dengan sukses. </div>”

Jadi, kamu bisa membuat tampilan alert box pada website yang bertujuan untuk memudahkan si pengunjung (visitor) pada akses website kamu. Misalkan, website kamu berisi pendaftaran anggota baru, dengan adanya alert show sehingga si pengunjung tidak bingung lagi untuk mendaftar anggota baru melalui website kamu.

Demikian tutorial cara membuat alert box dengan Bootstrap. Selamat mencoba.









Click to comment

Leave a Reply

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

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top