نشان ها
اسناد و نمونههایی برای نشانها، تعداد کوچک و جزء برچسبگذاری ما.
مثال ها
مدالها برای مطابقت با اندازه عنصر والد فوری با استفاده از اندازه قلم و em
واحدهای نسبی مقیاس می شوند. از نسخه 5، نشانها دیگر سبک فوکوس یا شناور پیوندها را ندارند.
سرفصل ها
عنوان مثالجدید
عنوان مثالجدید
عنوان مثالجدید
عنوان مثالجدید
عنوان مثالجدید
عنوان مثالجدید
<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» تعداد اعلانها است)، در نظر بگیرید که زمینه اضافی را با یک قطعه متن اضافی پنهان بصری اضافه کنید.
قرار گرفته است
از ابزارهای کمکی برای تغییر a .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>
رنگ های پس زمینه
از کلاس های ابزار پس زمینه ما برای تغییر سریع ظاهر یک نشان استفاده کنید. لطفاً توجه داشته باشید که هنگام استفاده از پیشفرض Bootstrap .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;