نیشانەکان

بەڵگەنامە و نموونە بۆ نیشانەکان، پێکهاتەی ژماردنی بچووک و ناونانی ئێمە.

لەم پەیجەدا

نموونە

نیشانەکان پێوانە دەکەن بۆ ئەوەی لەگەڵ قەبارەی توخمە باوکی دەستبەجێدا بگونجێت بە بەکارهێنانی قەبارەی فۆنت و 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" ژمارەی ئاگادارکردنەوەکانە)، بیر لەوە بکەرەوە کە کۆنتێکستی زیادە لەگەڵ پارچەیەک دەقی زیادە شاراوەی بینراودا بخەیتە ناوەوە.

جێگیر کراوە

سوودمەندییەکان بەکاربهێنە بۆ دەستکاریکردنی a .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پۆلەکەدا شاراوەتەوە.