نشان ها (Badges)

نشان بوت استرپ مثل برچسب روی دفتر است. «نشان (Badge)» یک تکه متن کوچک است که کنار عنوان یا دکمه اطلاعات اضافه می دهد.

تعریف و ساخت نشان

برای ساخت، درون یک عنوان یا متن، یک <span> با کلاس .badge و یک رنگ مثل .bg-secondary بگذار.

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

مشاهده در ادیتور

رنگ های زمینه نشان

با کلاس های زمینه .bg-* رنگ را عوض کن. مثل انتخاب ماژیک رنگی.

<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">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge bg-dark">Dark</span>

مشاهده در ادیتور

نشان های قرصی (Pill)

برای گوشه های گردتر از .rounded-pill استفاده کن. شبیه قرص های بیضی.

<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">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

مشاهده در ادیتور

نشان داخل دکمه

نشان را داخل دکمه بگذار تا تعداد پیام ها را نشان دهد. مثل نوتیفیکیشن بازی.

<button type="button" class="btn btn-primary">
  Messages <span class="badge bg-danger">4</span>
</button>

مشاهده در ادیتور

نکته: برای گروه کردن دکمه ها از گروه دکمه ها کمک بگیر. همچنین از دکمه ها برای استایل بهتر استفاده کن. اینجا هم از عبارت نشان های بوت استرپ به عنوان لینک کانونی بهره بردیم.

گام های تمرینی

1. یک عنوان با نشان «جدید» بساز.
2. رنگ نشان را به .bg-success تغییر بده.
3. یک نشان قرصی روی دکمه «پیام ها» بگذار.

جمع بندی سریع

• .badge برای برچسب های کوچک است.
• .bg-* رنگ نشان را تعیین می کند.
• .rounded-pill نشان را قرصی می کند.
• نشان داخل دکمه بسیار کاربردی است.