Artikel ini akan merangkumi perspektif berikut untuk menunjukkan penggunaan lencana Bootstrap:
- Bagaimana Menggunakan Lencana Bootstrap untuk Maklumat Tambahan?
- Bagaimana Menggunakan Lencana Bootstrap untuk Maklumat Kontekstual?
- Bagaimana untuk Menambah Gaya Tersuai pada Lencana Bootstrap?
- Bagaimana untuk Menambah Ikon pada Lencana Bootstrap?
- Bagaimana untuk Memautkan Lencana Bootstrap ke Sumber Lain?
- Bagaimana untuk Membuat Lencana Bulat?
- Bagaimana untuk Menggunakan Lencana Bootstrap sebagai Kaunter?
Apakah Lencana Bootstrap?
Lencana ialah komponen asas yang digunakan untuk menunjukkan penunjuk. Contohnya, ia boleh digunakan sebagai pembilang angka untuk menunjukkan bilangan pemberitahuan atau mesej:
Ia juga boleh digunakan untuk memaparkan maklumat tambahan, seperti ditunjukkan dalam imej yang diberikan:
Bagaimana Menggunakan Lencana Bootstrap untuk Maklumat Tambahan?
Lencana Bootstrap boleh ditambah dalam elemen HTML untuk digunakan sebagai maklumat tambahan. Lihat contoh yang dinyatakan di bawah untuk demonstrasi.
Contoh
Untuk menggunakan lencana Bootstrap untuk maklumat tambahan, pertama:
- Tambah ' ” dan “ ” unsur.
- Letakkan ' 'elemen dengan ' lencana ” dan “ lencana-* ” kelas. Kelas 'lencana-*' merujuk kepada lencana dengan warna yang ditentukan:
< h6 > biasiswa < rentang kelas = 'lencana lencana menengah' > Baru < / rentang >< / h6 >
Dapat diperhatikan bahawa dua lencana ditambah pada tajuk yang berkaitan:
Bagaimana Menggunakan Lencana Bootstrap untuk Maklumat Kontekstual?
Lencana Bootstrap juga boleh digunakan untuk memberikan maklumat kontekstual seperti “ lencana-bahaya ” memaparkan lencana dalam warna merah dan boleh digunakan untuk menunjukkan beberapa mesej yang gagal seperti batal, tidak sah atau lebih. ' lencana-kejayaan ” digunakan di mana kita ingin menunjukkan beberapa mesej kejayaan.
Contoh
Lihat kod yang diberikan untuk memahami senario yang dibincangkan:
< rentang kelas = 'lencana lencana-bahaya' >Akaun tidak disahkan< / rentang >< rentang kelas = 'maklumat lencana lencana' >ini adalah lencana< / rentang >
< rentang kelas = 'amaran lencana lencana' >Akaun Belum Selesai untuk kelulusan< / rentang >
< rentang kelas = 'lencana lencana-kejayaan' >Akaun disahkan< / rentang >
Pengeluaran
Bagaimana untuk Menambah Gaya Tersuai pada Lencana Bootstrap?
Anda juga boleh menggunakan CSS untuk menambah beberapa penggayaan unik pada lencana Bootstrap. Untuk pemahaman yang lebih baik, kelas dengan nama ' adat ' ditambah dalam ' ” unsur. Kemudian, sifat berikut digunakan:
< rentang kelas = 'lencana lencana-bahaya tersuai' >Akaun tidak disahkan < / rentang >< rentang kelas = 'maklumat lencana tersuai' >Ini adalah lencana< / rentang >
< rentang kelas = 'amaran lencana tersuai' >Akaun Belum Selesai untuk kelulusan< / rentang >
< rentang kelas = 'lencana lencana-kejayaan tersuai' >Akaun disahkan< / rentang >
Gaya kelas 'tersuai'.
.adat {Saiz huruf : 18px ;
berat fon : 100 ;
jarak huruf : 1px ;
padding : 8px 15px ;
}
' .adat ' digunakan untuk mengakses ' adat ” kelas. Ciri-ciri berikut digunakan untuknya:
- “ Saiz huruf ” melaraskan saiz fon.
- “ berat fon ” menyatakan ketebalan fon.
- “ jarak huruf ” menambah ruang antara huruf.
- “ padding ” menyediakan ruang di sekeliling kandungan elemen.
Pengeluaran
Bagaimana untuk Menambah Ikon pada Lencana Bootstrap?
Kita boleh menambah ikon yang berbeza pada lencana juga. Untuk berbuat demikian, terdapat beberapa kelas yang boleh digunakan untuk tujuan ini. Untuk maklumat lanjut, lawati Font Hebat laman web.
Contoh
Dalam HTML, tambahkan “ ” unsur. Dalam elemen ini, letakkan elemen sebaris “ ” atau “” untuk memasukkan kelas ikon:
< rentang kelas = 'lencana lencana-bahaya tersuai' > Akaun tidak disahkan< i kelas = 'bulatan fa-times-jauh' >< / i >
< / rentang >
< rentang kelas = 'lencana lencana-kejayaan tersuai' > Akaun disahkan
< i kelas = 'fas fa-user-check' >< / i >
< / rentang >
Pengeluaran
Bagaimana untuk Memautkan Lencana Bootstrap ke Sumber Lain?
Untuk menjadikan lencana Bootstrap boleh diklik, letakkan ' lencana 'kelas dalam HTML' teg ” dan berikan rujukan halaman yang dipautkan dalam “ href ” atribut:
< a href = '#' kelas = 'lencana lencana-bahaya tersuai' >Batalkan< / a >< a href = '#' kelas = 'maklumat lencana tersuai' >Serah< / a >
Pengeluaran
Bagaimana untuk Membuat Lencana Bulat?
Untuk menjadikan tepi lencana lebih bulat, tambahkan kelas “ pil lencana ”. Kelas ini menyokong “ yang lebih besar jejari sempadan 'dan mendatar' padding ” sifat:
< rentang kelas = 'lencana lencana-pil lencana-bahaya tersuai' >Akaun tidak disahkan < / rentang >< rentang kelas = 'lencana lencana-pil lencana-amaran tersuai' >Akaun Belum Selesai untuk kelulusan< / rentang >
< rentang kelas = 'lencana lencana-pil lencana-kejayaan tersuai' >Akaun disahkan < / rentang >
Pengeluaran
Bagaimana untuk Menggunakan Lencana Bootstrap sebagai Kaunter?
Untuk membuat butang dengan pembilang, tambahkan HTML “
Pemberitahuan < rentang kelas = 'lampu lencana lencana' > 4 < / rentang >
< / butang >
Pengeluaran
Itu semua tentang lencana Bootstrap dan label berkaitannya dalam Bootstrap.
Kesimpulan
Bootstrap ' lencana ” kelas digunakan untuk menambah lencana pada tapak web. Sebagai contoh, kelas seperti ' lencana-bahaya ”, “ maklumat lencana ”, dan banyak lagi boleh digunakan untuk menambahkan maklumat kontekstual pada lencana sebagai labelnya. Sesetengah kelas digunakan untuk menambah ikon pada lencana, seperti “ jauh fa-time-circle ” untuk meletakkan ikon bulatan silang. Siaran ini telah menyediakan panduan komprehensif tentang lencana dan label Bootstrap.