Artikel ini akan membahas perspektif berikut untuk mendemonstrasikan penggunaan lencana Bootstrap:
- Bagaimana Cara Menggunakan Lencana Bootstrap untuk Informasi Tambahan?
- Bagaimana Cara Menggunakan Lencana Bootstrap untuk Informasi Kontekstual?
- Bagaimana Cara Menambahkan Gaya Kustom ke Lencana Bootstrap?
- Bagaimana Cara Menambahkan Ikon ke Lencana Bootstrap?
- Bagaimana Cara Menautkan Lencana Bootstrap ke Sumber Lain?
- Bagaimana Cara Membuat Lencana Dibulatkan?
- Bagaimana Cara Menggunakan Lencana Bootstrap sebagai Penghitung?
Apa itu Lencana Bootstrap?
Lencana adalah komponen dasar yang digunakan untuk menunjukkan suatu indikator. Misalnya, mereka dapat digunakan sebagai penghitung angka untuk menunjukkan jumlah notifikasi atau pesan:
Mereka juga dapat digunakan untuk menampilkan informasi tambahan, seperti yang ditunjukkan pada gambar berikut:
Bagaimana Cara Menggunakan Lencana Bootstrap untuk Informasi Tambahan?
Lencana bootstrap dapat ditambahkan dalam elemen HTML untuk digunakan sebagai informasi tambahan. Lihat contoh yang disebutkan di bawah ini untuk demonstrasi.
Contoh
Untuk menggunakan lencana Bootstrap untuk informasi tambahan, pertama-tama:
- Menambahkan ' ' dan ' ” elemen.
- Tempatkan “
elemen ” dengan “ lencana ' dan ' lencana-* ” kelas. Kelas 'lencana-*' mengacu pada lencana dengan warna yang ditentukan:
< h6 > Beasiswa < menjangkau kelas = 'badge badge-secondary' > Baru < / menjangkau >< / h6 >
Dapat diamati bahwa dua lencana ditambahkan ke judul yang relevan:
Bagaimana Cara Menggunakan Lencana Bootstrap untuk Informasi Kontekstual?
Lencana bootstrap juga dapat digunakan untuk memberikan informasi kontekstual seperti “ bahaya lencana ” menampilkan lencana dengan warna merah dan dapat digunakan untuk menampilkan beberapa pesan yang gagal seperti batal, tidak valid, atau lainnya. “ lencana-sukses ” digunakan di mana kami ingin menunjukkan beberapa pesan sukses.
Contoh
Lihatlah kode yang diberikan untuk memahami skenario yang dibahas:
< menjangkau kelas = 'badge badge-bahaya' >Akun tidak diverifikasi< / menjangkau >< menjangkau kelas = 'info lencana lencana' >ini adalah lencana< / menjangkau >
< menjangkau kelas = 'peringatan lencana lencana' >Akun Tertunda untuk persetujuan< / menjangkau >
< menjangkau kelas = 'lencana lencana-sukses' >Akun diverifikasi< / menjangkau >
Keluaran
Bagaimana Cara Menambahkan Gaya Kustom ke Lencana Bootstrap?
Anda juga dapat menggunakan CSS untuk menambahkan gaya unik pada lencana Bootstrap. Untuk pemahaman yang lebih baik, kelas dengan nama ' kebiasaan ” ditambahkan dalam “
< menjangkau kelas = 'badge badge-info custom' >Ini adalah lencana< / menjangkau >
< menjangkau kelas = 'badge badge-warning custom' >Akun Tertunda untuk persetujuan< / menjangkau >
< menjangkau kelas = 'badge badge-sukses custom' >Akun diverifikasi< / menjangkau >
Gaya kelas 'khusus'.
.kebiasaan {ukuran huruf : 18px ;
font-berat : 100 ;
spasi huruf : 1px ;
lapisan : 8px 15px ;
}
“ .kebiasaan ” digunakan untuk mengakses “ kebiasaan ' kelas. Properti berikut diterapkan padanya:
- “ ukuran huruf ” menyesuaikan ukuran font.
- “ font-berat ” menyatakan ketebalan font.
- “ spasi huruf ” menambahkan spasi di antara huruf-huruf.
- “ lapisan ” menyediakan ruang di sekitar konten elemen.
Keluaran
Bagaimana Cara Menambahkan Ikon ke Lencana Bootstrap?
Kami juga dapat menambahkan ikon berbeda ke lencana. Untuk melakukannya, ada beberapa kelas yang dapat dimanfaatkan untuk tujuan ini. Untuk informasi lebih lanjut, kunjungi Font Keren situs web.
Contoh
Di HTML, tambahkan “
< saya kelas = 'lingkaran-waktu-jauh' >< / saya >
< / menjangkau >
< menjangkau kelas = 'badge badge-sukses custom' > Akun diverifikasi
< saya kelas = 'fas fa-pengguna-periksa' >< / saya >
< / menjangkau >
Keluaran
Bagaimana Cara Menautkan Lencana Bootstrap ke Sumber Lain?
Untuk membuat lencana Bootstrap dapat diklik, tempatkan “ lencana ” kelas dalam HTML “ ” beri tag dan berikan referensi halaman tertaut di kolom “ href ” atribut:
< sebuah href = '#' kelas = 'lencana lencana-bahaya kustom' > Batal < / sebuah >< sebuah href = '#' kelas = 'badge badge-info custom' >Kirim< / sebuah >
Keluaran
Bagaimana Cara Membuat Lencana Dibulatkan?
Untuk membuat tepi lencana lebih membulat, tambahkan kelas “ pil lencana ”. Kelas ini mendukung “ radius perbatasan ” dan mendatar “ lapisan ” properti:
< menjangkau kelas = 'lencana lencana-pill lencana-bahaya kustom' >Akun tidak diverifikasi < / menjangkau >< menjangkau kelas = 'badge badge-pill badge-warning custom' >Akun Tertunda untuk persetujuan< / menjangkau >
< menjangkau kelas = 'lencana lencana-pil lencana-kesuksesan kustom' >Akun diverifikasi < / menjangkau >
Keluaran
Bagaimana Cara Menggunakan Lencana Bootstrap sebagai Penghitung?
Untuk membuat tombol dengan penghitung, tambahkan HTML “
Notifikasi < menjangkau kelas = 'lampu badge badge' > 4 < / menjangkau >
< / tombol >
Keluaran
Itu semua tentang lencana Bootstrap dan labelnya yang relevan di Bootstrap.
Kesimpulan
Bootstrap “ lencana ” kelas digunakan untuk menambahkan lencana ke situs web. Misalnya, kelas seperti “ bahaya lencana ”, “ badge-info ”, dan lainnya dapat digunakan untuk menambahkan informasi kontekstual ke lencana sebagai labelnya. Beberapa kelas diterapkan untuk menambahkan ikon ke lencana, seperti “ jauh fa-waktu-lingkaran ” untuk menempatkan ikon lintas lingkaran. Posting ini telah memberikan panduan komprehensif tentang lencana dan label Bootstrap.