نشان ها

اسناد و نمونه‌هایی برای نشان‌ها، تعداد کوچک و جزء برچسب‌گذاری ما.

در این صفحه

مثال ها

مدالها برای مطابقت با اندازه عنصر والد فوری با استفاده از اندازه قلم و emواحدهای نسبی مقیاس می شوند. از نسخه 5، نشان‌ها دیگر سبک فوکوس یا شناور پیوندها را ندارند.

سرفصل ها

عنوان مثالجدید

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>

رنگ های پس زمینه

اضافه شده در نسخه 5.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کلاس، گنجانده شده است.

نشان های قرص

از .rounded-pillکلاس ابزار استفاده کنید تا نشان ها را با علامت بزرگتر گردتر کنید border-radius.

اولیه ثانوی موفقیت خطر هشدار اطلاعات سبک تاریک

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

متغیرها

اضافه شده در نسخه 5.2.0

به عنوان بخشی از رویکرد متغیرهای CSS در حال تکامل Bootstrap، نشان‌ها اکنون از متغیرهای CSS محلی .badgeبرای سفارشی‌سازی در زمان واقعی استفاده می‌کنند. مقادیر برای متغیرهای CSS از طریق Sass تنظیم می‌شوند، بنابراین سفارشی‌سازی Sass نیز همچنان پشتیبانی می‌شود.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

متغیرهای Sass

$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;