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 Links
Menambahkan 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">&times;</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

Postingan Populer