برجونه

د بیجونو لپاره اسناد او مثالونه، زموږ کوچنۍ شمیره او د لیبل کولو برخه.

په دې پاڼه کې

مثالونه

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;