Tutorial Series

Tutorial membuat Alerts Bootstrap - Tutorial Dasar Bootstrap 3

f190c95b6f3467ceb2ffd24cc130e1d0

Tutorial kali ini kita akan belajar cara membuat Alert dengan Bootstrap 3. Apa itu Alerts di Bootstrap?
Adalah sebuah pesan umpan balik atas tindakan pengguna biasanya terdapat peringatan, memberikan informasi terkait pada sebuah web.
Kapan saya menggunakan Alerts ?
Ketika kita membuat sebuah website maka disitu pasti ada informasi ataupun larangan, maka dari itu untuk menampilkan informasi/ larangan agar terlihat cantik maka kita menggunakan Components Bootstrap yaitu Alerts.

Pertama kita akan membuat Alerts default dari Bootstrap, mari kita buat bersama-sama Alerts menggunakan Bootstarp 3.

  1. Buat sebuah dokumen html, misalkan dengan nama alerts.html
  2. Buka alerts.html menggunakan text editor kesukaan (sublime, vim, atom dll)
  3. Kemudian masukan kode berikut
  4. Simpan, kemudian buka file alerts.html menggunakan browser(chrome, firefox dll). Maka akan terlihat seperti berikut
  5. See the Pen Alert default Bootstrap 3 by Maful P Arnandi (@maful) on CodePen.

Dalam contoh diatas kita membuat sebuah Alerts default, artinya kita tidak meambahka customize lebih pada Alerts. Di contoh kedua ini kita akan belajar membuat Alerts dengan menambahkan sebuah tombol tutup, maksudnya adalah ketika tombol tutup tersebut di klik pada Alerts maka Alerts akan hilang, perbedaannya adalah kita hanya menambahkan class .alert-dismissible pada Alerts yang kita buat sebelumnya. Baik kita mulai saja
  1. Buat sebuah dokumen html, misalkan dengan nama alerts-dismiss.html
  2. Buka alerts-dismiss.html menggunakan text editor kesukaan (sublime, vim, atom, notepadd++, dll)
  3. Masukan kode berikut
  4. Simpan, kemudian buka file alerts-dismiss.html menggunakan browser(chrome, firefox dll). Maka akan terlihat seperti berikut
  5. See the Pen Alert Dismissible Bootstrap 3 by Maful P Arnandi (@maful) on CodePen.

Kita telah membuat Alerts Bootstrap dengan 2 pilihan yang pertama adalah Alerts default dan Alerts Dismissible. Teman-teman bisa membuat Alerts yang lebih kreatif sesuai kebutuhan teman-teman.

Semoga ilmu tadi bermanfaat untuk teman-teman dan saya.
Salam BoDes