نشان Bootstrap 5

کپه‌ها

کپه‌ها (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>

خود جرب کریں