بيج
بيجز لاءِ دستاويز ۽ مثال، اسان جي ننڍي ڳڻپ ۽ ليبلنگ جو حصو.
مثال
em
لاڳاپو فونٽ جي سائيز ۽ يونٽن کي استعمال ڪندي فوري والدين عنصر جي سائيز سان ملائڻ لاءِ بيج اسڪيل .
مثال عنواننئون
مثال عنواننئون
مثال عنواننئون
مثال عنواننئون
مثال عنواننئون
مثال عنواننئون
<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>
ڪائونٽر مهيا ڪرڻ لاءِ بيجز لنڪس يا بٽڻ جي حصي طور استعمال ڪري سگھجن ٿا.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>
نوٽ ڪريو ته ان تي منحصر آهي ته اهي ڪيئن استعمال ڪيا ويا آهن، بيجز شايد اسڪرين ريڊرز ۽ ساڳئي مددگار ٽيڪنالاجي جي استعمال ڪندڙن لاءِ مونجهاري جو شڪار هجن. جڏهن ته بيج جو اسٽائل انهن جي مقصد جي طور تي هڪ بصري اشارو مهيا ڪري ٿو، انهن صارفين کي صرف بيج جي مواد سان پيش ڪيو ويندو. مخصوص صورتحال تي مدار رکندي، اهي بيج لڳي سگھن ٿا بي ترتيب اضافي لفظن يا انگن اکرن جي آخر ۾، لنڪ، يا بٽڻ.
جيستائين حوالو واضح نه هجي (جيئن ته ”نوٽيفڪيشن“ مثال سان، جتي اهو سمجھيو وڃي ٿو ته ”4“ نوٽيفڪيشن جو تعداد آهي)، غور ڪريو اضافي متن جي لڪايل ٽڪڙي سان گڏ اضافي حوالي سان.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>
متضاد تبديليون
بيج جي ظاهر کي تبديل ڪرڻ لاءِ ھيٺ ڏنل ذڪر ڪيل ترميمي طبقن مان ڪو به شامل ڪريو.
<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>
مددگار ٽيڪنالاجي جي معني کي پهچائڻ
معنيٰ شامل ڪرڻ لاءِ رنگ استعمال ڪرڻ صرف هڪ بصري اشارو مهيا ڪري ٿو، جيڪو مددگار ٽيڪنالاجي جي استعمال ڪندڙن تائين نه پهچايو ويندو - جهڙوڪ اسڪرين ريڊر. پڪ ڪريو ته رنگ مان ظاهر ڪيل معلومات يا ته مواد مان ئي پڌري آهي (مثال طور ڏيکاريل متن)، يا متبادل طريقن سان شامل ڪيو ويو آهي، جهڙوڪ اضافي متن .sr-only
ڪلاس سان لڪايو ويو آهي.
گولي جا نشان
.badge-pill
بيجز کي وڌيڪ گول ڪرڻ لاءِ موڊيفائر ڪلاس استعمال ڪريو (وڏي border-radius
۽ اضافي افقي سان padding
). مفيد جيڪڏھن توھان بيجز کي وڃايو v3.
<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>
لنڪس
هڪ عنصر تي لاڳاپيل .badge-*
طبقن کي استعمال ڪندي جلدي طور تي هور ۽ فوڪس رياستن سان قابل عمل بيج مهيا ڪن ٿا.<a>
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>