Bootstrap - Badges: Menambah Kecantikan ke Dalam elemen Web Anda

Hai, para pengembang web yang bersemangat! Hari ini, kita akan melihat dunia yang menarik dari Bootstrap Badges. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengarahkan Anda dalam perjalanan ini, langkah demi langkah. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita mulai petualangan ini bersama!

Apa Itu Bootstrap Badges?

Badges adalah komponen kecil hitung dan penanda yang dapat menambah informasi ekstra ke elemen web Anda. Mereka seperti stiker digital kecil yang dapat membuat website Anda lebih informatif dan menarik secara visual. Bayangkan Anda membuat platform media sosial, dan Anda ingin menunjukkan berapa banyak pesan yang belum dibaca oleh pengguna - itu tempat badges berguna!

Contoh Badge Dasar

Mari kita mulai dengan contoh sederhana:

<h1>Selamat Datang di MySpace 2.0 <span class="badge bg-secondary">Baru</span></h1>

Dalam contoh ini, kita menambahkan badge di sebelah judul kami. Elemen span dengan kelas badge dan bg-secondary membuat badge kecil berwarna abu-abu yang mengatakan "Baru". Itu seperti memasang stiker "Baru!" di produk di toko - itu menarik perhatian!

Badges dalam Aksi

Badges dengan Tombol

Badges dapat digunakan dengan tombol untuk memberikan informasi tambahan. Ini contohnya:

<button type="button" class="btn btn-primary">
Notifikasi <span class="badge bg-secondary">4</span>
</button>

Kode ini membuat tombol yang mengatakan "Notifikasi" dengan badge kecil yang menunjukkan angka 4. Itu sempurna untuk menunjukkan berapa banyak notifikasi yang belum dibaca pengguna!

Badges untuk Notifikasi

Bicarakan tentang notifikasi, mari kita lihat bagaimana kita dapat menggunakan badges untuk membuat ikon notifikasi:

<i class="bi bi-bell-fill position-relative">
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">pesan yang belum dibaca</span>
</span>
</i>

Kode ini membuat ikon bel untuk dengan badge merah yang menunjukkan "99+". span yang visually-hidden adalah untuk pembaca layar, membuat situs kami lebih aksesibel.

Posisi Badges

Badges dapat diposisikan dalam berbagai cara. Mari kita lihat beberapa contoh:

<button type="button" class="btn btn-primary position-relative">
Kotak Masuk
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">pesan yang belum dibaca</span>
</span>
</button>

Kode ini memposisikan badge di sudut kanan atas tombol. Itu seperti memasang catatan sticky di sudut buku!

Badges sebagai Indikator

Badges juga dapat digunakan sebagai indikator:

<button type="button" class="btn btn-primary position-relative">
Profil
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">peringatan baru</span>
</span>
</button>

Ini membuat indikator titik merah kecil di tombol - sempurna untuk menunjukkan ada sesuatu baru tanpa menentukan angka.

Menyesuaikan Warna Badge

Bootstrap menyediakan berbagai warna latar belakang untuk badges. Ini adalah tabel kelas yang tersedia:

Kelas	Deskripsi
bg-primary	Badge biru
bg-secondary	Badge abu-abu
bg-success	Badge hijau
bg-danger	Badge merah
bg-warning	Badge kuning
bg-info	Badge biru muda
bg-light	Badge putih
bg-dark	Badge hitam

Anda dapat menggunakan kelas ini seperti ini:

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

Badge Berbentuk Pil

Jika Anda ingin badge Anda memiliki ujung yang bundar, Anda dapat menggunakan kelas rounded-pill:

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>

Badges berbentuk pil ini cocok untuk tag atau label!

Menggabungkan Semua

Sekarang kita telah melihat semua konsep ini, mari kita buat contoh yang lebih kompleks yang menggabungkan jenis badge yang berbeda:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySpace 2.0</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
Home
<span class="badge bg-primary rounded-pill">Baru</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link position-relative" href="#">
Pesan
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">pesan yang belum dibaca</span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link position-relative" href="#">
Notifikasi
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-success border border-light rounded-circle">
<span class="visually-hidden">peringatan baru</span>
</span>
</a>
</li>
</ul>
</div>
</nav>

Kode ini membuat batang navigasi dengan tiga item: Home (dengan badge "Baru"), Pesan (dengan badge hitungan), dan Notifikasi (dengan badge indikator). Itu seperti membuat panel kontrol pesawat - setiap badge memberikan pengguna informasi penting secara cepat!

Dan itu dia, teman-teman! Kita telah menjelajahi dunia Bootstrap Badges, dari label sederhana hingga notifikasi kompleks. Ingat, seperti semua alat di pengembangan web, kunci adalah penggunaan badges secara bijaksana. Mereka bagus untuk menarik perhatian, tetapi terlalu banyak dapat membuat situs Anda terlihat kacau.

Sekarang, mari kitaakhiri, saya teringat tentang murid yang pernah berkata, "Badges seperti permusuhan di kue - mereka membuat segala sesuatu lebih menarik!" Dan saya setuju. Jadi, majulah, eksperimen, dan tambahkan keindahan badge-tastic ke website Anda!

Credits: Image by storyset