Bootstrap - Badges Demo
Apa Itu Badge?
Halo teman-teman future web developers! Hari ini, kita akan mendalam ke dunia yang menarik Bootstrap badges. Sebagai guru komputer yang ramah di lingkungan Anda, saya disini untuk mengorbit Anda dalam perjalanan ini, bahkan jika Anda belum pernah menulis satu baris kode sebelumnya. Jadi, siapkan tas virtual Anda, dan mari kita mulai petualangan ini bersama!
Badge di Bootstrap adalah seperti stiker digital yang Anda dapat menambahkan ke halaman web Anda. Ini adalah elemen kecil, seringkali berbentuk bulat atau bentuk pil, yang digunakan untuk menyorot atau menampilkan informasi tambahan. Pihakkan sebagai kesetaraan web dari gele gele kecil notifikasi yang Anda lihat di aplikasi ponsel Anda – mereka menarik perhatian dan informatif!
Analologi Dunia Nyata
Imaginasi Anda memakai seragam pramuka. Badge di lengan Anda mewakili pencapaian Anda, kan? Badge Bootstrap bekerja sama dalam dunia digital. Mereka dapat menunjukkan angka (seperti pesan yang belum dibaca), status (baru, penjualan, dll.), atau menambahkan penarikan visual ke halaman web Anda.
Memulai Dengan Bootstrap Badges
Sebelum kita masuk ke kode, mari pastikan kita telah mengatur Bootstrap. Jangan khawatir; itu mudah seperti mengatur tenda dalam perjalanan berkemah!
Mengatur Bootstrap
Untuk menggunakan Bootstrap, kita perlu menyertakan file CSS dan JavaScriptnya di HTML. Berikut cara Anda melakukannya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Badges Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Konten Anda disini -->
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Ini seperti menyiapkan panggung untuk pertunjukan badge kita. Kita telah menghubungkan ke file CSS dan JavaScript Bootstrap, yang memberikan kita akses ke semua kebaikan Bootstrap, termasuk badges.
Penggunaan Badge Dasar
Sekarang kita siap, mari kita buat badge pertamamu!
Contoh Badge Sederhana
<h1>Selamat datang di blog saya <span class="badge bg-secondary">Baru</span></h1>Dalam contoh ini, kita menambahkan badge tepat di sebelah judul kita. Elemen span dengan kelas badge dan bg-secondary membuat badge abu-abu sederhana dengan teks "Baru".
Penjelasan
-
<span>: Ini adalah wadah inline yang digunakan untuk menandai bagian dari teks. -
class="badge": Kelas Bootstrap ini mengubah span kita menjadi badge. -
bg-secondary: Ini menambahkan warna latar belakang abu-abu ke badge kita.
Warna Badge
Bootstrap menawarkan palet warna yang berwarna untuk badge Anda. Mari kita jelajahi mereka!
<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>Setiap badge ini memiliki warna yang berbeda, sempurna untuk menyampaikan makna yang berbeda atau hanya untuk membuat halaman Anda lebih berwarna!
Tabel Makna Warna
| Warna | Penggunaan Umum |
|---|---|
| Primary | Aksi utama atau informasi |
| Secondary | Informasi yang kurang penting |
| Success | Aksi positif atau pesan |
| Danger | Peringatan atau pesan kesalahan |
| Warning | Informasi peringatan |
| Info | Pesan informasi netral |
| Light | Latar belakang halus atau kurang menonjol |
| Dark | Kontras tinggi atau informasi penting |
Badge Bentuk Pil
Ingin membuat badge Anda terlihat lebih bundar? Mari kenalkan badge bentuk pil!
<span class="badge rounded-pill bg-primary">Badge Bentuk Pil</span>Dengan menambahkan kelas rounded-pill, kita mengubah badge biasa kita menjadi bentuk pil. Itu seperti memberikan badge Anda sebuah make-over!
Badge Dalam Tombol
Badge juga dapat digunakan dalam tombol untuk menciptakan beberapa efek yang menarik. Mari coba:
<button type="button" class="btn btn-primary">
Pesan <span class="badge bg-secondary">4</span>
</button>Ini menciptakan tombol yang mengatakan "Pesan" dengan badge kecil yang menunjukkan angka 4. Itu sempurna untuk menampilkan hal seperti jumlah pesan yang belum dibaca!
Badge Yang Diposisikan
kadang-kadang, Anda ingin badge Anda diposisikan relatif terhadap elemen lain. Bootstrap membuat ini mudah dengan badges yang diposisikan:
<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>Ini menciptakan tombol dengan badge diposisikan di sudut kanan atas, sedikit menempel ke tombol. Itu seperti cherry di atas es krim button Anda!
Memecahkan Halnya
-
position-relative: Membuat tombol sebagai konteks penempatan untuk badge. -
position-absolute: Menempatkan badge secara mutlak dalam tombol. -
top-0 start-100: Menempatkan badge di sudut kanan atas. -
translate-middle: Menggeser badge untuk penempatan visual yang lebih baik. -
visually-hidden: Menyediakan teks untuk pembaca layar tanpa menunjukkankannya secara visual.
Kesimpulan
Dan begitu saja, teman-teman! Kita telah berpetualangan melalui negeri Bootstrap badges, dari badge berwarna sederhana hingga bentuk pil, dan bahkan badges yang diposisikan di tombol. Ingat, badges adalah seperti remah-remah dalam resep desain web Anda – gunakan mereka bijaksana untuk menambahkan jumlah yang tepat ke halaman Anda!
Latihan membuat sempurna, jadi jangan takut untuk mencoba kombinasi yang berbeda. Siapa tahu? Anda mungkin saja menciptakan tren besar berikutnya dalam desain web dengan penggunaan kreatif Anda terhadap badges!
Hari baik coding, dan semoga badge Anda selalu cerah dan tooltip Anda selalu informatif!
Credits: Image by storyset