Bootstrap - Alerts: Panduan Kawan Anda ke Notifikasi Menarik
Hai sana, para pengembang web yang ambisius! Hari ini, kita akan melihat dunia yang menakjubkan Bootstrap Alerts. Sebagai guru komputer di lingkungan Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Percayalah, setelah tutorial ini, Anda akan membuat alert yang membuat situs web Anda tampak menarik!
Apa Itu Bootstrap Alerts?
Sebelum kita masuk ke detil, mari bicarakan apa itu alert. Bayangkan Anda berjalan di jalan, dan tiba-tiba Anda melihat tanda kuning yang mengatakan "Peringatan: Lantai Basah". Itu adalah alert di dunia nyata! Dalam desain web, alert berfungsi sama - mereka menarik perhatian pengguna dan menyediakan informasi penting.
Bootstrap, alat desain web yang dapat dipercaya, membuat membuat alert ini sangat mudah. Jadi, mari kita usap lengan dan mulai!
Alert Sederhana: Blok Pembangun
Struktur Dasar
Mari kita mulai dengan bentuk paling sederhana alert. Berikut adalah penampilannya:
<div class="alert alert-primary" role="alert">
Ini adalah alert utama—periksalah!
</div>Sekarang, mari kitauraikan ini:
- Kita mulai dengan elemen
<div>. Pihak ini adalah kotak yang akan berisi alert kami. -
class="alert"memberitahu Bootstrap bahwa div ini adalah alert. -
alert-primarymenentukan skema warna. Dalam kasus ini, itu adalah warna utama ( biasanya biru di Bootstrap). -
role="alert"untuk aksesibilitas. Itu membantu pembaca layar mendengar memahami bahwa ini adalah alert.
spektrum warna Alert
Bootstrap memberikan kita berbagai macam warna. Mari kita lihat semua opsi ini:
| Kelas | Tujuan |
|---|---|
| alert-primary | Warna tema utama |
| alert-secondary | Warna tema sekunder |
| alert-success | Menandakan kesuksesan |
| alert-danger | Menandakan bahaya atau kesalahan |
| alert-warning | Menandakan peringatan |
| alert-info | Menyediakan informasi |
| alert-light | Latar belakang terang dengan teks gelap |
| alert-dark | Latar belakang gelap dengan teks terang |
Coba mengganti alert-primary dalam contoh kita dengan kelas ini. Itu seperti memiliki kotak crayon untuk alert Anda!
Contoh Alert Live: Menghidupkan Alert
Sekarang, mari lihat bagaimana kita bisa membuat alert kita merespon tindakan pengguna. Ini adalah trik menarik:
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Tampilkan alert live</button>
<script>
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
` <div>${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('')
alertPlaceholder.append(wrapper)
}
const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
alertTrigger.addEventListener('click', () => {
appendAlert('Bagus, Anda memicu pesan alert ini!', 'success')
})
}
</script>Wah, itu banyak! Mari kitauraikan ini:
- Kita memiliki
<div>placeholder tempat alert kita akan muncul. - Ada tombol yang, ketika diklik, akan menampilkan alert.
- Kode JavaScript mendengarkan klik pada tombol.
- Ketika diklik, ia membuat alert baru dan menambahkannya ke halaman.
Ini seperti magis - Anda mengklik tombol, dan poof! Alert muncul!
Warna Tautan: Membuat Tautan Menarik
kadang-kadang, Anda ingin menambahkan tautan ke alert Anda. Bootstrap memastikan tautan ini menonjol:
<div class="alert alert-primary" role="alert">
Ini adalah alert utama dengan <a href="#" class="alert-link">tautan contoh</a>. Klik jika Anda suka.
</div>Kelas alert-link memastikan warna tautan cocok dengan tema alert. Itu seperti mengkoordinasi pakaian Anda - semua hal cocok sempurna!
Konten Tambahan: Memperkuat Alert Anda
Ingin membuat alert Anda lebih informatif? Anda bisa menambahkan judul, paragraf, dan bahkan pemisah:
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Bagus!</h4>
<p>Awww ya, Anda berhasil membaca pesan alert penting ini. Teks contoh ini akan berjalan sedikit lebih lama agar Anda dapat melihat bagaimana spacing dalam alert bekerja dengan jenis konten ini.</p>
<hr>
<p class="mb-0">Ketika Anda memerlukan, pastikan Anda menggunakan utilitas margin untuk menjaga hal-hal rapih dan bersih.</p>
</div>Ini seperti membuat alert Anda menjadi artikel mini. Sempurna untuk saat Anda memiliki banyak hal untuk dikatakan!
Alert Dengan Ikon: Menambah Flair Visual
Ikon dapat membuat alert Anda lebih menarik. Berikut adalah cara Anda menambahkannya:
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<div>
Alert contoh dengan ikon
</div>
</div>Kode SVG ini membuat segitiga peringatan kecil. Itu seperti menambah emoji ke pesan teks Anda - itu membantu menyampaikan suasana!
Menutup Alert: Memberikan Pengguna Pilihan Menutupnya
kadang-kadang, Anda ingin memberikan pengguna pilihan untuk menutup alert. Berikut adalah cara:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Wah!</strong> Anda seharusnya memeriksa beberapa bidang di bawah ini.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>Kelas alert-dismissible dan tombol <button> dengan data-bs-dismiss="alert" membuat alert ini bisa ditutup. Itu seperti memberikan pengguna remote kontrol untuk alert Anda!
Alert Beranimasi: Menambah Pizzazz
Akhirnya, mari bicarakan menambah animasi ke alert kita. Bootstrap menggunakan kelas fade dan show untuk ini:
<div class="alert alert-primary alert-dismissible fade show" role="alert">
Alert ini akan muncul dan hilang!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>Kelas fade menambahkan efek transisi yang halus, sedangkan show membuat alert terlihat. Ketika alert ditutup, ia akan perlahan hilang. Itu seperti alert Anda sedang mengambil penghormatan sebelum meninggalkan panggung!
Dan itu adalah dia, teman-teman! Anda baru saja menyelesaikan perjalanan singkat melalui Bootstrap Alerts. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba contoh ini. Sebelum Anda tahu, Anda akan membuat alert yang tidak hanya memberi informasi kepada pengguna Anda tetapi juga menikmati gaya dan fungsinya. Selamat coding, dan semoga alert Anda selalu menarik perhatian (dalam cara yang baik)!
Credits: Image by storyset