Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Breaking

Wednesday 5 April 2017

Belajar Bootstrap Part 6 Menampilkan Alert

Belajar Bootstrap Part 6 Menampilkan Alert


Assalamualaikum Wr. Wb.


PENGERTIAN

Alert berfungsi untuk memberikan pesan atau umpan balik kepengguna atas tindakan yang dilakukan oleh pengguna. Untuk membuat pesan alert dengan bootstrap dengan cara kita hanya perlu menambahkan class “alert” untuk mendefinisikan penggunaan alert bootstrap. selanjutnya tambahkan satu class lagi untuk menentukan jenis alert apa yang di gunakan diantaranya alert-success, alert-info, alert-warning, dan alert-danger.
  • class alert-success, pesan alert yang ditampilkan berwarna hijau dan biasanya di gunakan untuk membuat pesan sukses.
  • class alert-info, pesan alert yang ditampilkan berwarna biru dan biasanya di gunakan untuk membuat pesan yang berupa informasi.
  • class alert-warning, pesan alert yang ditampilkan berwarna kuning dan biasanya di gunakan untuk membuat pesan yang berupa peringatan.
  • class alert-danger, pesan alert yang ditampilkan berwarna merah dan biasanya pesan alert ini di gunakan untuk membuat pesan gagal.

LATAR BELAKANG

Ingin membuat sebuah pesan dengan tampilan yang menarik kepada pengunjung. 

MAKSUD & TUJUAN

Membuat pesan alert dengan berbagai gaya atau efek yang telah berada di dalam framework bootstrap.
Memberikan pesan peringatan kepada pengunjung.

ALAT & BAHAN
  • LAPTOP/PC
  • Text Editor
  • Browser
LANGKAH KERJA

Berikut kita akan membuat contoh penggunaan dari class-class yang di jelaskan diatas. 
  Pertama tama kita buat tag <div> yang di dalamnya ditanam class alert ditambah salah satu class yg 4 tadi, misalnya seperti berikut :
<div class="container">
        <div class="alert alert-success">Pesan yang di tampilkan Sukses</div>
        <div class="alert alert-info">
Pesan yang di tampilkan Info</div>
        <div class="alert alert-warning">
Pesan yang di tampilkan Warning</div>
        <div class="alert alert-danger">
Pesan yang di tampilkan Danger</div>
</div>

Ketika dijalankan hasilnya seperti berikut


Kita bisa menambahkan tombol close pada pesan tersebut, dengan menambahkan tag seperti ini 
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
disimpan di dalam tag <div> seperti ini

<div class="container">
        <div class="alert alert-success">
             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
             Pesan yang di tampilkan Sukses
        </div>
        <div class="alert alert-info">
 
             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
             Pesan yang di tampilkan Info
        </div>
        <div class="alert alert-warning">

             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
             Pesan yang di tampilkan Warning 
        </div>
        <div class="alert alert-danger">

             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 
             Pesan yang di tampilkan Danger
       </div>
</div>




 

Mungkin itu dari saya, semoga bermanfaat.

Sekian & jangan lupa share + ikuti

Syukron

Wassalamualaikum Wr. Wb.


Referensi


No comments:

Post a Comment

Adbox