Bootstrap Alerts
I.Latar Belakang.
Membuat suatu tampilan dengan Bootsrap.
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime Text
III.Tujuan.Agar tampilan suatu program itu responsiv.
IV.Penjelasan.
Bootstrap Alerts
Alerts
Alerts diciptakan dengan kelas .alert, diikuti oleh salah satu dari empat kelas kontekstual .alert-sukses, .alert-info, .alert-peringatan atau .alert-bahaya:
Contoh
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
Alert LinksMenambahkan kelas peringatan-link ke link apapun di dalam kotak peringatan untuk membuat "pencocokan link berwarna":
Contoh
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Closing Alerts
Untuk menutup pesan peringatan, menambahkan kelas .alert-dismissable ke wadah peringatan. Kemudian tambahkan class = "dekat" dan data-memberhentikan = "alert" untuk link atau elemen tombol (ketika Anda klik ini kotak peringatan akan hilang).
Contoh
<div class="alert alert-success alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
aria- * atribut dan & kali; penjelasan
Untuk membantu meningkatkan aksesibilitas untuk orang yang menggunakan pembaca layar, Anda harus mencakup aria-label = "dekat" atribut, saat membuat tombol tutup.
&waktu; (×) adalah sebuah entitas HTML yang merupakan ikon yang lebih disukai untuk tombol dekat, bukan huruf "x".
animasi Alerts.fade dan .in menambahkan efek memudar saat menutup pesan peringatan:
Contoh
<div class="alert alert-danger fade in">
Contoh :
Maka outputnya :
V.Kesimpulan.Kita bisa gunakan bootstrap untuk membantu kita membuat tampilan web dengan cepat.
VI.Refrensi. https://www.w3schools.com/bootstrap/bootstrap_typography.asp
Membuat suatu tampilan dengan Bootsrap.
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime Text
III.Tujuan.Agar tampilan suatu program itu responsiv.
IV.Penjelasan.
Bootstrap Alerts
Alerts
Alerts diciptakan dengan kelas .alert, diikuti oleh salah satu dari empat kelas kontekstual .alert-sukses, .alert-info, .alert-peringatan atau .alert-bahaya:
Contoh
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
Alert LinksMenambahkan kelas peringatan-link ke link apapun di dalam kotak peringatan untuk membuat "pencocokan link berwarna":
Contoh
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Closing Alerts
Untuk menutup pesan peringatan, menambahkan kelas .alert-dismissable ke wadah peringatan. Kemudian tambahkan class = "dekat" dan data-memberhentikan = "alert" untuk link atau elemen tombol (ketika Anda klik ini kotak peringatan akan hilang).
Contoh
<div class="alert alert-success alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
aria- * atribut dan & kali; penjelasan
Untuk membantu meningkatkan aksesibilitas untuk orang yang menggunakan pembaca layar, Anda harus mencakup aria-label = "dekat" atribut, saat membuat tombol tutup.
&waktu; (×) adalah sebuah entitas HTML yang merupakan ikon yang lebih disukai untuk tombol dekat, bukan huruf "x".
animasi Alerts.fade dan .in menambahkan efek memudar saat menutup pesan peringatan:
Contoh
<div class="alert alert-danger fade in">
Contoh :
Maka outputnya :
V.Kesimpulan.Kita bisa gunakan bootstrap untuk membantu kita membuat tampilan web dengan cepat.
VI.Refrensi. https://www.w3schools.com/bootstrap/bootstrap_typography.asp
Komentar
Posting Komentar