Bootstrap - Lencana: Menambah Kecantikan ke Dalam Element Web Anda

Hai, para pengembang web yang bersemangat! Hari ini, kita akan mendalamkan dunia yang menarik dari Bootstrap Badges. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk menghidahkan 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?

Lencana adalah komponen kecil hitung dan penanda yang dapat menambah informasi ekstra ke dalam elemen web Anda. Mereka seperti stiker digital kecil yang dapat membuat website Anda menjadi 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 adalah tempat dimana lencana berguna!

Contoh Lencana 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 lencana di sebelah judul kami. Elemen span dengan kelas badge dan bg-secondary membuat lencana kecil berwarna abu-abu yang mengatakan "Baru". Itu seperti meletakkan stiker "Baru!" di produk di toko - itu menarik perhatian!

Lencana Dalam Aksi

Lencana Dengan Tombol

Lencana dapat digunakan bersama tombol untuk memberikan informasi tambahan. Ini adalah contoh:

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

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

Lencana untuk Notifikasi

Bicarakan tentang notifikasi, mari kita lihat bagaimana kita dapat menggunakan lencana 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 tinggil dengan lencana merah yang menunjukkan "99+". span yang visually-hidden adalah untuk pembaca layar, membuat situs kami lebih aksesibel.

Posisi Lencana

Lencana dapat diposisikan dengan 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 menempatkan lencana di sudut kanan atas tombol. Itu seperti meletakkan catatan Sticky di sudut buku!

Lencana sebagai Indikator

Lencana 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 yang baru tanpa menentukan angka.

Menyesuaikan Warna Lencana

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

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

Anda dapat menggunakan kelas ini seperti ini:

<span class="badge bg-primary">Primari</span>
<span class="badge bg-secondary">Sekunder</span>
<span class="badge bg-success">Sukses</span>
<span class="badge bg-danger">Bahaya</span>
<span class="badge bg-warning text-dark">Peringatan</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Terang</span>
<span class="badge bg-dark">Gelap</span>

Lencana Biji

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

<span class="badge rounded-pill bg-primary">Primari</span>
<span class="badge rounded-pill bg-secondary">Sekunder</span>
<span class="badge rounded-pill bg-success">Sukses</span>

Lencana berbentuk biji ini sangat cocok untuk tag atau label!

Menggabungkan Semua

Sekarang kita telah melihat semua konsep ini, mari kita buat contoh yang lebih kompleks yang menggabungkan jenis lencana 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="#">
Beranda
<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 bilah navigasi dengan tiga item: Beranda (dengan lencana "Baru"), Pesan (dengan lencana hitungan), dan Notifikasi (dengan lencana indikator). Itu seperti membuat panel kendali untuk kapal ruang angkasa - setiap lencana memberikan pengguna informasi penting dalam pandang pertama!

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

Sekarang, pergilah, eksperimen, dan tambahkan beberapa keindahan lencana ke website Anda!

Credits: Image by storyset