About

Wednesday, April 5, 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


Faiz Ahmad

About Faiz Ahmad

Faiz Ahmad. Salatiga, 28 Juni 2000. Saya hanya seorang Hamba Allah yang masih banyak kekurangan, maka dari itu saya ingin menutupi kekurangan saya dengan melakukan hal yang bermanfaat kepada orang lain. Seperti filosofi tanah “Bermanfaat untuk orang sebanyak mungkin, namun dikenal oleh orang sesedikit mungkin”. Pernahkah kita mengingat jasa tanah? Sedetik saja dalam sehari? Saya rasa hanya sedikit sekali yang mengingatnya, berbeda dengan matahari yang jasanya selalu kita ingat. Padahal kita semua tentu tahu bagaimana jadinya dunia ini jika tidak ada tanah.

Subscribe to this Blog via Email :