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

بهاره حسنیبهاره حسنی
194 بازدید

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

برای استفاده از برچسب ها از کلاس  badges. همراه با یک کلاس متنی در یک عنصر مانند <span> استفاده میکنیم.

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

در این مطلب میخواهیم برچسب ها (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]

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

badges

نشان های متنی (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]

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

contextual badges

گرد کردن دور برچسب (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]

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

pill-badge

نشان داخل یک عنصر (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]

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

badges element

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

22+ محصولات
400+ سفارشات تکمیل شده
2085+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت