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