اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
in English

برجونه

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

مثالونه

emد بیجونو اندازه د اړونده فونټ اندازه کولو او واحدونو په کارولو سره د سمدستي اصلي عنصر اندازې سره سمون لپاره . د v5 پورې، بیجونه نور د لینکونو لپاره تمرکز یا هوور سټایلونه نلري.

سرلیکونه

د مثال سرلیکنوی

د مثال سرلیکنوی

د مثال سرلیکنوی

د مثال سرلیکنوی

د مثال سرلیکنوی
د مثال سرلیکنوی
<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>

تڼۍ

بیجونه د کاونټر چمتو کولو لپاره د لینکونو یا بټونو برخې په توګه کارول کیدی شي.

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

په یاد ولرئ چې د دوی کارولو څرنګوالي پورې اړه لري، بیجونه ممکن د سکرین لوستونکو او ورته مرستندویه ټیکنالوژیو کاروونکو لپاره مغشوش وي. پداسې حال کې چې د بیجونو سټایل د دوی هدف په توګه بصری اشاره چمتو کوي، دا کاروونکي به په ساده ډول د بیج مینځپانګې سره وړاندې شي. په ځانګړي حالت پورې اړه لري، دا بیجونه ممکن د جملې، لینک، یا تڼۍ په پای کې د تصادفي اضافي کلمو یا شمیرو په څیر ښکاري.

پرته لدې چې شرایط روښانه وي (لکه څنګه چې د "اطلاعاتو" مثال سره ، چیرې چې دا پوهیږي چې "4" د خبرتیاو شمیر دی) ، د اضافي متن د لید پټې برخې سره اضافي شرایط په پام کې ونیسئ.

موقعیت لري

د ترمیم کولو لپاره اسانتیاوې وکاروئ .badgeاو د لینک یا تڼۍ په کونج کې یې ځای په ځای کړئ.

<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ټولګی د یو څو نورو اسانتیاوو سره ځای په ځای کړئ پرته له دې چې د نور عمومي شاخص لپاره حساب وکړئ.

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

د شاليد رنګونه

زموږ د شالید کارولو ټولګي وکاروئ ترڅو ژر تر ژره د بیج بڼه بدله کړئ. مهرباني وکړئ په یاد ولرئ کله چې د بوټسټریپ ډیفالټ .bg-lightکاروئ ، تاسو احتمال لرئ د متن رنګ یوټیلیټ ته اړتیا ولرئ لکه .text-darkد مناسب سټایل کولو لپاره. دا ځکه چې د شالید اسانتیاوې پرته بل څه نه تنظیموي background-color.

لومړني ثانوي بریالیتوب خطر خبرتیا معلومات رڼا تیاره
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
مرستندویه ټیکنالوژیو ته د معنی رسول

د معنی اضافه کولو لپاره د رنګ کارول یوازې یو بصری نښې وړاندې کوي، کوم چې به د مرستندویه ټیکنالوژیو کاروونکو ته نه لیږل کیږي - لکه د سکرین لوستونکي. ډاډ ترلاسه کړئ چې د رنګ لخوا څرګند شوي معلومات یا پخپله د مینځپانګې څخه څرګند دي (د بیلګې په توګه څرګند متن) ، یا د بدیل وسیلو له لارې شامل شوي ، لکه د .visually-hiddenټولګي سره پټ اضافي متن.

د ګولۍ بیجونه

د یوټیلټي ټولګي څخه کار واخلئ .rounded-pillترڅو بیجونه د لوی سره ډیر ګردي کړي border-radius.

لومړني ثانوي بریالیتوب خطر خبرتیا معلومات رڼا تیاره
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

ساس

متغیرات

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