Source

بيج

بيجز لاءِ دستاويز ۽ مثال، اسان جي ننڍي ڳڻپ ۽ ليبلنگ جو حصو.

مثال

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>