بیجز
بیجز کے لیے دستاویزات اور مثالیں، ہماری چھوٹی گنتی اور لیبلنگ جزو۔
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>