نشان ها
اسناد و نمونه‌هایی برای نشان‌ها، تعداد کوچک و جزء برچسب‌گذاری ما.
مدالها برای مطابقت با اندازه عنصر والد فوری با استفاده از اندازه قلم و 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) استفاده کنید. اگر نشان های نسخه 3 را از دست بدهید مفید است.
<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>