BS5 nishonlar (badges)
Nishonlar (badges)
Nishonlar istalgan kontentga qo‘shimcha ma’lumot qo‘shish uchun ishlatiladi:
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
To‘rtburchak nishonlar yaratish uchun <span> elementlari ichida .badge klassini kontekstual klass (masalan, .bg-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 bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-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 (.bg-*) foydalaning:
Misol
<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">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge bg-dark">Dark</span>
O‘zingiz sinab ko‘ring »Yumaloq (pill) nishonlar
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Nishonlarni yumaloqroq qilish uchun .rounded-pill klassidan foydalaning:
Misol
<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">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light">Light</span>
<span class="badge rounded-pill bg-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 bg-danger">4</span>
</button>
O‘zingiz sinab ko‘ring »Bilasizmi?
W3.CSS — Bootstrap’ga ajoyib muqobil.
W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!