معمولا نشانها در بوت استرپ برای اشاره کردن و بولد کردن یک قسمت به کار میروند ، برای اطلاعات بیشتر درباره ی جدید بودن یک لیبل میتوان از نشان استفاده کرد . در سایر قسمت های آموزش بوت استرپ به بررسی نکات ریز و کاربردی در باره تایپوگرافی و تعریف دکمه ها و …. پرداخته ایم که توصیه میشود قبل از خواندن این مقاله این نکات را بخوانید.
اگر نکاتی که در سایر قسمت های بوت استرپ گفته شده است را میدانید پس تا انتهای مقاله با ما همراه باشید تا به بررسی نشانها در بوت استرپ بپردازیم.
نشانها
نشان ها برای اضافه کردن اطلاعات اضافی به هر محتوا استفاده می شوند. از کلاس .badge همراه با یک کلاس متنی (مانند .badge-second) در عناصر <span> استفاده کنید تا نشان های مستطیل شکل ایجاد کنید. توجه داشته باشید که مقیاس مدالها برای مطابقت با اندازه عنصر والدین (در صورت وجود):
|
1 2 3 4 5 6 7 |
<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> |
نشان های متنی
برای تغییر رنگ یک نشان از هر یک از کلاس های متنی (.badge- *) استفاده کنید:
|
1 2 3 4 5 6 7 8 |
<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> |
نشان های قرصی شکل
از کلاس .badge-pil استفاده کنید تا نشانها قرصی شکل شوند:
|
1 2 3 4 5 6 7 8 |
<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> |
گاها برای شما عزیزان هم پیش امده است که نیاز داشته باشید تا اعدادی داخل نشان ها قرار گیرند ، برای رفع این مسئله کافی است از قطعه کد زیر استفاده کنید تا با ساختار زیر نشان های شما عدد گذاری شوند.
|
1 2 3 |
<button type="button" class="btn btn-primary"> Messages <span class="badge badge-light">4</span> </button> |
ویدیو قسمت 11
پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.
موفق باشید.
