BS4 nishonlar (badges)
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Nishonlar istalgan kontentga qo‘shimcha ma’lumot qo‘shish uchun ishlatiladi. To‘rtburchak nishonlar yaratish uchun <span> elementlari ichida .badge klassini kontekstual klass (masalan, .badge-secondary) bilan birga ishlating. E’tibor bering, nishonlar ota element o‘lchamiga moslashadi (agar u mavjud bo‘lsa):
Misol
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
O‘zingiz sinab ko‘ring »Kontekstual nishonlar
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Nishon rangini o‘zgartirish uchun istalgan kontekstual klassdan (.badge-*) foydalaning:
Misol
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
O‘zingiz sinab ko‘ring »Yumaloq (pill) nishonlar
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Nishonlarni yumaloqroq qilish uchun .badge-pill klassidan foydalaning:
Misol
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
O‘zingiz sinab ko‘ring »Element ichidagi nishon
Tugma ichida nishondan foydalanishga misol:
Misol
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">4</span>
</button>
O‘zingiz sinab ko‘ring »W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!