نشان ها و برچسب ها (Badges) در بوت استرپ

در مبحث قبل با آموزش دکمه های گروهی در بوت استرپ آشنا شدید.

در این مطلب میخواهیم برچسب ها (Badges) را به شما همراهان عزیز وب سایت آموزشی پرنیان طرح آموزش دهیم.

نشان ها یا برچسب ها (badges) :

نشان ها برای اضافه کردن اطلاعات اضافی به هر محتوا استفاده میشوند.

از کلاس badges. به همراه یک کلاس متنی مانند badges-second. در عناصر <span> استفاده کنید تا نشان های مستطیل شکل ایجاد کنید.

توجه داشته باشید که مقیاس مدلها بر اساس سایز عنصر والدین مطاقبت دارد.

برای توضیح بیشتر مثال زیر را ببینید:

[php]

<div class=”container”>
<h2>Badges</h2>
<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>
</div>

[/php]

برچسب های ایجاد شده را در تصویر زیر ببینید:

نشان های متنی (Contextual Badges) :

برای تغییر رنگ یک نشان از هر یک از کلاس های متنی *-badges. استفاده کنید.

مانند این مثال :

[php]

<div class=”container”>
<h2>Contextual Badges</h2>
<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>
</div>

[/php]

در این تصویر نشان های رنگی را ببینید:

گرد کردن دور برچسب (Pill Badges) :

از کلاس pill-badge. استفاده کنید تا دور نشان ها گرد تر شود.

برای مثال :

[php]

<div class=”container”>
<h2>Pill Badges</h2>
<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>
</div>

[/php]

خروجی مثال بالا را در این تصویر مشاهده کنید:

نشان داخل یک عنصر (Badge Inside An Element) :

شما میتوانید از نشان ها داخل عناصر استفاده نمایید.

در مثال زیر از نشان داخل عنصر دکمه استفاده کرده ایم:

[php]

<div class=”container”>
<h2>Badge inside a Button</h2>
<button type=”button” class=”btn btn-primary”>
Messages <span class=”badge badge-light”>4</span>
</button>
<button type=”button” class=”btn btn-danger”>
Notifications <span class=”badge badge-light”>7</span>
</button>
</div>

[/php]

تصویر یک نشان داخل دکمه: