نشان‌های Bootstrap 5
- صفحه قبل گروه دکمه‌های BS5
- صفحه بعدی نوار پیشرفت BS5
نشانک‌ها
نشانک‌ها (Badges) برای افزودن اطلاعات اضافی به محتوا استفاده می‌شوند:
در <span> در عناصر .badge کلاس‌ها و کلاس‌های محیطی (مانند .bg-secondary) برای ایجاد نشانک مستطیلی استفاده کنید. توجه داشته باشید که نشانک برای تطابق با اندازه عنصر والد خود بزرگ یا کوچک می‌شود (در صورت وجود):
مثال
<h1>عنوان نمونه <span class="badge bg-secondary">جدید</span></h1> <h2>عنوان نمونه <span class="badge bg-secondary">جدید</span></h2> <h3>عنوان نمونه <span class="badge bg-secondary">جدید</span></h3> <h4>عنوان نمونه <span class="badge bg-secondary">جدید</span></h4> <h5>عنوان نمونه <span class="badge bg-secondary">جدید</span></h5> <h6>عنوان نمونه <span class="badge bg-secondary">جدید</span></h6>
نشانک‌های محیطی
لطفاً از هر کلاس محیطی (.bg-*) برای تغییر رنگ نشانک استفاده کنید:
مثال
<span class="badge bg-primary">اصلی</span> <span class="badge bg-secondary">مهم نیست</span> <span class="badge bg-success">موفقیت</span> <span class="badge bg-danger">خطرناک</span> <span class="badge bg-warning">اخطار</span> <span class="badge bg-info">اطلاعات</span> <span class="badge bg-light">روشن</span> <span class="badge bg-dark">سیاه</span>
نشانک کپسولی
استفاده .rounded-pill کلاس باعث گردید نشانک‌ها گردتر شوند:
مثال
<span class="badge rounded-pill bg-primary">اصلی</span> <span class="badge rounded-pill bg-secondary">دومی</span> <span class="badge rounded-pill bg-success">موفقیت</span> <span class="badge rounded-pill bg-danger">خطرناک</span> <span class="badge rounded-pill bg-warning">اخطار</span> <span class="badge rounded-pill bg-info">اطلاعات</span> <span class="badge rounded-pill bg-light"> روشن</span> <span class="badge rounded-pill bg-dark">سیاه</span>
نشانک در داخل عنصر
مثال استفاده از نشانک در داخل دکمه:
مثال
<button type="button" class="btn btn-primary"> پیام <span class="badge bg-danger">4</span> </button>
- صفحه قبل گروه دکمه‌های BS5
- صفحه بعدی نوار پیشرفت BS5
