برجونه
د بیجونو لپاره اسناد او مثالونه، زموږ کوچنۍ شمیره او د لیبل کولو برخه.
مثالونه
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;