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