نشان‌ها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

نشان‌ها برای اضافه کردن اطلاعات اضافی در مورد محتواها بکار می‌روند. از کلاس .badge به همراه کلاس‌های متنی (مانند .badge-secondary) داخل عنصر <span> برای ایجاد نشان های مستطیلی استفاده کنید. دقت کنید که نشان ها برای تطبیق با عنصر والد (اگر داشته باشند) خود تغییر سایز می دهند:[۱]

مثال

1 <h1>Example heading <span class="badge badge-secondary">New</span></h1>
2 <h2>Example heading <span class="badge badge-secondary">New</span></h2>
3 <h3>Example heading <span class="badge badge-secondary">New</span></h3>
4 <h4>Example heading <span class="badge badge-secondary">New</span></h4>
5 <h5>Example heading <span class="badge badge-secondary">New</span></h5>
6 <h6>Example heading <span class="badge badge-secondary">New</span></h6>


مشاهدهٔ نتیجه

نشان های متنی

از کلاس‌های متنی (.badge-*) برای تغییر رنگ نشان استفاده کنید:

مثال

1 <span class="badge badge-primary">Primary</span>
2 <span class="badge badge-secondary">Secondary</span>
3 <span class="badge badge-success">Success</span>
4 <span class="badge badge-danger">Danger</span>
5 <span class="badge badge-warning">Warning</span>
6 <span class="badge badge-info">Info</span>
7 <span class="badge badge-light">Light</span>
8 <span class="badge badge-dark">Dark</span>


مشاهدهٔ نتیجه


نشان های Pill

از کلاس .badge-pill برای ایجاد نشان‌هایی با گوشه‌های گِرد تر استفاده کنید:

مثال

1 <span class="badge badge-pill badge-primary">Primary</span>
2 <span class="badge badge-pill badge-secondary">Secondary</span>
3 <span class="badge badge-pill badge-success">Success</span>
4 <span class="badge badge-pill badge-danger">Danger</span>
5 <span class="badge badge-pill badge-warning">Warning</span>
6 <span class="badge badge-pill badge-info">Info</span>
7 <span class="badge badge-pill badge-light">Light</span>
8 <span class="badge badge-pill badge-dark">Dark</span>


مشاهدهٔ نتیجه


نشان داخل یک عنصر

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

مثال

1 <button type="button" class="btn btn-primary">
2   Messages <span class="badge badge-light">4</span>
3 </button>


مشاهدهٔ نتیجه



منابع آموزشی