Bootstrap - Demikan Badges
Apa Itu Badge?
Hai sana, para pengembang web masa depan! Hari ini, kita akan melihat dunia yang menarik Bootstrap badges. Sebagai guru komputer di lingkungan Anda, saya di sini 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 seperti stiker digital yang Anda dapat menambahkan ke halaman web Anda. Ini adalah elemen kecil, biasanya bulat atau berbentuk pil, yang digunakan untuk menyorot atau menampilkan informasi tambahan. Bayangkan ini seperti equivalent web dari gelembung pemberitahuan kecil yang Anda lihat di aplikasi ponsel Anda - mereka menarik perhatian dan informatif!
Analogi Dunia Nyata
Bayangkan Anda memakai seragam pramuka. Badge di lengan Anda mewakili prestasimu, kan? Badge Bootstrap bekerja sama seperti itu di dunia digital. Mereka dapat menunjukkan angka (seperti pesan yang belum dibaca), status (baru, penjualan, dll.), atau menambahkan kepentingan visual ke halaman web Anda.
Memulai dengan Bootstrap Badges
Sebelum kita masuk ke kode, mari pastikan kita sudah mengatur Bootstrap. Jangan khawatir; itu mudah seperti mengatur tenda di perjalanan berkemah!
Mengatur Bootstrap
Untuk menggunakan Bootstrap, kita perlu menyertakan file CSS dan JavaScriptnya di HTML. Ini adalah 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 sudah 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 di sebelah judul kita. Elemen <span> dengan kelas badge dan bg-secondary membuat badge abu-abu sederhana dengan teks "Baru".
Penjelasan
-
<span>: Ini adalah kontainer 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彩虹warna 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, yang sempurna untuk mengirimkan arti berbeda atau hanya membuat halaman Anda lebih berwarna!
Tabel Arti 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 Berbentuk Pil
Ingin membuat badge Anda terlihat lebih bulat? Mari masukkan badge berbentuk pil!
<span class="badge rounded-pill bg-primary">Badge Pil</span>Dengan menambahkan kelas rounded-pill, kita mengubah badge biasa kita menjadi badge berbentuk pil. Itu seperti memberikan badge Anda sebuah make over!
Badge di Tombol
Badge juga dapat digunakan dalam tombol untuk menciptakan efek yang bagus. Mari kita 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 badge 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 yang diposisikan di sudut kanan atas, sedikit menembus tombol. Itu seperti cherry di atas es krim tombol Anda!
Memecahkan hal itu
-
position-relative: Membuat tombol menjadi konteks penempatan bagi badge. -
position-absolute: Menempatkan badge secara mutlak dalam tombol. -
top-0 start-100: Menempatkan badge di sudut kanan atas. -
translate-middle: Memindahkan badge untuk alihan visual yang baik. -
visually-hidden: Menyediakan teks untuk pembaca layar tanpa menunjukkankannya secara visual.
Kesimpulan
Dan di sana Anda punya dia, teman-teman! Kita telah berpetualangan melalui negeri Bootstrap badges, dari badge berwarna sederhana ke badge berbentuk pil, dan bahkan badge yang diposisikan di tombol. Ingat, badge seperti rempah dalam resep desain web Anda - gunakan mereka bijaksana untuk menambahkan jumlah tepat rasa 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!
Happy coding, dan may your badges always be bright and your tooltips always informative!
Credits: Image by storyset