- عناصر
- نشان ها
پایه
کد
اصلی
ثانویه
ثانویه
خطر
هشدار
اطلاعات
تاریک
<!-- primary --> <span class="badge bg-primary">Primary</span> <!-- secondary --> <span class="badge bg-secondary">Secondary</span> <!-- success --> <span class="badge bg-success">Success</span> <!-- danger --> <span class="badge bg-danger">Danger</span> <!-- warning --> <span class="badge bg-warning">Warning</span> <!-- info --> <span class="badge bg-info">Info</span> <!-- dark --> <span class="badge bg-dark">Dark</span>
توخالی
کد
اصلی
ثانویه
ثانویه
خطر
هشدار
اطلاعات
تاریک
<!-- primary outline --> <span class="badge badge-outline-primary">Primary</span> <!-- secondary outline --> <span class="badge badge-outline-secondary">Secondary</span> <!-- success outline --> <span class="badge badge-outline-success">Success</span> <!-- danger outline --> <span class="badge badge-outline-danger">Danger</span> <!-- warning outline --> <span class="badge badge-outline-warning">Warning</span> <!-- info outline --> <span class="badge badge-outline-info">Info</span> <!-- dark outline --> <span class="badge badge-outline-dark">Dark</span>
Pills
کد
اصلی
اصلی
<!-- pills --> <span class="badge bg-primary rounded-full">Primary</span> <!-- pills outline --> <span class="badge badge-outline-primary rounded-full">Primary</span>
Classic
کد
اصلی
اصلی
<!-- badge --> <span class="badge bg-primary rounded-none">Primary</span> <!-- badge outline --> <span class="badge badge-outline-primary rounded-none">Primary</span>
Badges with سرفصل
کدبا استفاده از اندازه نسبی قلم و واحدهای em، نشانها را برای مطابقت با اندازه عنصر والد فوری تغییر میدهند.
عنوان مثال اصلی
عنوان مثال ثانویه
عنوان مثال اطلاعات
عنوان مثال هشدار
عنوان مثال خطر
عنوان مثال تاریک
<!-- Badges with Heading --> <h1>Example heading <span class="badge bg-primary">Primary</span></h1> <h2>Example heading <span class="badge bg-success">Success</span></h2> <h3>Example heading <span class="badge bg-info">Info</span></h3> <h4>Example heading <span class="badge bg-warning">Warning</span></h4> <h5>Example heading <span class="badge bg-danger">Danger</span></h5> <h6>Example heading <span class="badge bg-dark">Dark</span></h6>
Custom Badges
کد
جان دو
جان دوx
<!-- icon with text -->
<button type="button" class="btn btn-primary my-4">
<span class="flex items-center">
<svg> ... </svg> Facebook
</span>
<span class="badge absolute ltr:right-0 rtl:left-0 -top-3 bg-danger p-0.5 px-1.5 rounded-full">9</span>
</button>
<!-- text -->
<button type="button" class="btn btn-info my-4"><span>Twitter</span><span class="badge absolute ltr:right-0 rtl:left-0 -top-3 bg-danger p-0.5 px-1.5 rounded-full">4</span></button>
<!-- icon -->
<button type="button" class="btn btn-secondary px-5 my-4">
<svg> ... </svg>
<span class="badge absolute ltr:right-0 rtl:left-0 -top-3 bg-danger p-0.5 px-1.5 rounded-full">8</span>
</button>
<!-- square -->
<button type="button" class="btn btn-dark my-4">Notifications<span class="badge my-0 bg-white-light text-black ltr:ml-4 rtl:mr-4">4</span></button>
<!-- rounded -->
<span class="badge bg-warning p-0 ltr:pr-4 rtl:pl-4 my-4 rounded-full flex items-center text-base"><img src="/assets/images/profile-34.jpeg" alt="image" class="w-10 h-10 rounded-full object-cover" /><span class="ltr:ml-2 rtl:mr-2">John Doe</span></span>
<!-- rounded with icon -->
<span class="badge bg-danger p-0 ltr:pr-4 rtl:pl-4 my-4 rounded-full flex items-center text-base"><img src="/assets/images/profile-34.jpeg" alt="image" class="w-10 h-10 rounded-full object-cover" /><span class="ltr:ml-2 rtl:mr-2">John Doe</span><span class="ltr:ml-4 rtl:mr-4 cursor-pointer hover:opacity-90">x</span></span>
© . تمام حقوق مادی و معنوی محفوظ است.