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