بیجز

بیجز کے لیے دستاویزات اور مثالیں، ہماری چھوٹی گنتی اور لیبلنگ جزو۔

اس صفحہ پر

مثالیں

emمتعلقہ فونٹ سائزنگ اور اکائیوں کا استعمال کرتے ہوئے فوری پیرنٹ عنصر کے سائز سے ملنے کے لیے بیجز کا پیمانہ ۔ v5 کے مطابق، بیجز میں اب لنکس کے لیے فوکس یا ہوور اسٹائل نہیں ہیں۔

عنوانات

مثال کی سرخینئی

html

<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>

بٹن

بیجز کو کاؤنٹر فراہم کرنے کے لیے لنکس یا بٹنوں کے حصے کے طور پر استعمال کیا جا سکتا ہے۔

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

نوٹ کریں کہ ان کے استعمال کے طریقے پر منحصر ہے، بیجز اسکرین ریڈرز اور اسی طرح کی معاون ٹیکنالوجیز کے صارفین کے لیے پریشان کن ہو سکتے ہیں۔ جبکہ بیجز کی اسٹائلنگ ان کے مقصد کے بارے میں ایک بصری اشارہ فراہم کرتی ہے، ان صارفین کو صرف بیج کے مواد کے ساتھ پیش کیا جائے گا۔ مخصوص صورتحال پر منحصر ہے، یہ بیجز کسی جملے، لنک یا بٹن کے آخر میں بے ترتیب اضافی الفاظ یا اعداد کی طرح لگ سکتے ہیں۔

جب تک کہ سیاق و سباق واضح نہ ہو (جیسا کہ "اطلاعات" کی مثال کے ساتھ، جہاں یہ سمجھا جاتا ہے کہ "4" اطلاعات کی تعداد ہے)، اضافی متن کے بصری طور پر چھپے ہوئے ٹکڑے کے ساتھ اضافی سیاق و سباق کو شامل کرنے پر غور کریں۔

تعینات

ایک میں ترمیم کرنے کے لیے یوٹیلیٹیز کا استعمال کریں .badgeاور اسے لنک یا بٹن کے کونے میں رکھیں۔

html

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

آپ .badgeکلاس کو مزید عام اشارے کی گنتی کے بغیر چند مزید یوٹیلیٹیز سے بھی بدل سکتے ہیں۔

html

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

پس منظر کے رنگ

v5.2.0 میں شامل کیا گیا۔

ہمارے مددگاروں کے ساتھ background-colorمتضاد پیش منظر کے ساتھ سیٹ کریں ۔ اس سے پہلے اسٹائل کے لیے اپنی پسند اور یوٹیلیٹیز کو دستی طور پر جوڑنا ضروری تھا ، جسے آپ اب بھی استعمال کر سکتے ہیں اگر آپ چاہیں۔color.text-bg-{color}.text-{color}.bg-{color}

پرائمری ثانوی کامیابی خطرہ وارننگ معلومات روشنی اندھیرا

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

معاون ٹکنالوجی کے معنی پہنچانا

معنی کو شامل کرنے کے لیے رنگ کا استعمال صرف ایک بصری اشارہ فراہم کرتا ہے، جو کہ معاون ٹیکنالوجیز - جیسے کہ اسکرین ریڈرز کے صارفین تک نہیں پہنچایا جائے گا۔ اس بات کو یقینی بنائیں کہ رنگ سے ظاہر کی گئی معلومات یا تو خود مواد سے واضح ہے (مثلاً مرئی متن)، یا متبادل ذرائع سے شامل کی گئی ہے، جیسے کہ .visually-hiddenکلاس کے ساتھ چھپا ہوا اضافی متن۔

گولی کے بیجز

.rounded-pillبیجز کو بڑے کے ساتھ مزید گول بنانے کے لیے یوٹیلیٹی کلاس کا استعمال کریں border-radius۔

پرائمری ثانوی کامیابی خطرہ وارننگ معلومات روشنی اندھیرا

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

سی ایس ایس

متغیرات

v5.2.0 میں شامل کیا گیا۔

بوٹسٹریپ کے ابھرتے ہوئے CSS متغیرات کے نقطہ نظر کے حصے کے طور پر، بیجز اب مقامی CSS متغیرات .badgeکو بہتر ریئل ٹائم حسب ضرورت کے لیے استعمال کرتے ہیں۔ CSS متغیرات کی قدریں Sass کے ذریعے سیٹ کی جاتی ہیں، اس لیے Sass حسب ضرورت اب بھی تعاون یافتہ ہے۔

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass متغیرات

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;