Rumah > Artikel > hujung hadapan web > Analisis ringkas tentang cara menggunakan komponen ikon lencana dalam Bootstrap
Analisis ringkas tentang cara menggunakan komponen ikon lencana dalam Bootstrap
- 青灯夜游ke hadapan
- 2021-11-30 19:07:322786semak imbas
Bagaimana untuk menggunakan komponen ikon lencana dalam
Bootstrap? Artikel berikut akan menerangkan cara menggunakan komponen ikon lencana Bootstrap5 melalui contoh kod saya harap ia akan membantu anda!
1 Struktur Lencana
Lencana biasanya digunakan di kawasan kecil di sebelah kanan bar navigasi, tajuk, butang dan avatar untuk mengira . (seperti n mesej yang belum dibaca) atau kenal pasti keluaran baharu, hangat popular, dsb. Dengan menggunakan saiz fon relatif dan unit em, lencana boleh diskalakan untuk memadankan saiz elemen induk langsung. Bermula dengan Bootstrap 5, lencana tidak lagi mempunyai fokus pautan atau gaya tuding. [Cadangan berkaitan: "tutorial bootstrap"]
Struktur lencana adalah sangat mudah, yang mengandungi dua kelas yang menunjukkan lencana dan bg-* ialah warna latar belakang. Anda juga boleh menggunakan text-* untuk menetapkan warna fon.
<span class="badge bg-secondary">文字内容</span>
2 Lencana digunakan untuk teks
Apabila lencana digunakan untuk teks, ia akan melaraskan saiz secara automatik agar sepadan dengan teks.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>徽章</title>
</head>
<body>
<div>
<br><br><br>
<h1>Example heading <span class="badge bg-info ">New</span></h1>
<h2>Example heading <span class="badge bg-danger ">Hot</span></h2>
<h3>Example heading <span class="badge bg-info ">New</span></h3>
<h4>Example heading <span class="badge bg-info ">New</span></h4>
<h5>Example heading <span class="badge bg-info ">New</span></h5>
<h6>Example heading <span class="badge bg-info ">New</span></h6>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
3 untuk butang
Lencana boleh menyediakan pembilang sebagai sebahagian daripada pautan atau butang.
<button type="button" class="btn btn-primary"> 未读消息 <span class="badge bg-secondary">4</span> </button>
Sila ambil perhatian bahawa bergantung pada cara ia digunakan, lencana mungkin mengelirukan pengguna pembaca skrin dan teknologi bantuan yang serupa. Walaupun gaya lencana memberikan petunjuk visual tentang tujuannya, pengguna ini hanya melihat kandungan lencana. Bergantung pada konteks, lencana ini mungkin kelihatan seperti perkataan atau nombor tambahan rawak di hujung ayat, pautan atau butang.
Melainkan konteksnya jelas (seperti dalam contoh "Mesej Belum Dibaca", yang difahami bahawa "4" ialah bilangan pemberitahuan), pertimbangkan untuk memasukkan konteks tambahan dalam coretan teks tambahan yang tersembunyi secara visual.
<button type="button" class="btn btn-primary">
个人中心 <span class="badge bg-secondary">9</span>
<span class="visually-hidden">未读消息</span>
</button>
Perhatikan bahawa label tersembunyi ini tidak akan dipaparkan di hadapan pengguna dan tidak akan ada gesaan apabila tetikus melayang jika anda mahu gesaan apabila tetikus melayang, anda boleh memberikan butang atau Tajuk itu ditambahkan pada lencana Perbezaannya ialah apabila ia ditambahkan pada butang, akan ada gesaan apabila tetikus melayang di atas keseluruhan butang ia ditambah pada label span, akan ada gesaan hanya apabila tetikus menghala ke nombor 9. Terdapat kelewatan semasa melayang, jadi ia mesti diletakkan Beberapa saat di atas.
<button type="button" class="btn btn-primary">
个人中心 <span class="badge bg-secondary" title="您有9条未读消息" >9</span>
</button>
<button type="button" class="btn btn-primary" title="您有9条未读消息" >
个人中心 <span class="badge bg-secondary" >9</span>
</button>
4 Warna Latar Belakang
Tukar rupa lencana anda dengan cepat menggunakan kelas utiliti yang disediakan. Ambil perhatian bahawa apabila menggunakan .bg-light lalai Bootstrap, anda mungkin memerlukan utiliti warna teks seperti .text-dark untuk mendapatkan gaya yang betul. Ini kerana utiliti latar belakang hanya menetapkan warna latar belakang.
<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>
5 Lencana Kapsul
Gunakan kelas utiliti .round-pill untuk menjadikan lencana lebih bulat dengan jejari sempadan yang lebih besar.
<span class="badge rounded-pill bg-primary">Primary</span> <span class="badge rounded-pill bg-secondary">Secondary</span> <span class="badge rounded-pill bg-success">Success</span> <span class="badge rounded-pill bg-danger">Danger</span> <span class="badge rounded-pill bg-warning text-dark">Warning</span> <span class="badge rounded-pill bg-info text-dark">Info</span> <span class="badge rounded-pill bg-light text-dark">Light</span> <span class="badge rounded-pill bg-dark">Dark</span>
Untuk pengetahuan lanjut tentang bootstrap, sila lawati: tutorial asas bootstrap! !
Atas ialah kandungan terperinci Analisis ringkas tentang cara menggunakan komponen ikon lencana dalam Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Artikel berkaitan
Lihat lagi- Perbincangan ringkas tentang cara membungkus lajur dalam susun atur grid Bootstrap
- Perbincangan ringkas tentang cara mengisih dan mengimbangi lajur dalam susun atur grid Bootstrap
- Bagaimana untuk menggunakan jadual dalam Bootstrap? Analisis ringkas tentang penggunaan jadual berkuasa
- Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan
- Bagaimana untuk menambah bar alat navigasi dalam Bootstrap? Analisis ringkas tentang penggunaan komponen Navbar