- عناصر
- نشان ها
ساده
نمونه کد
اصلی
ثانویه
موفق
اخطار
هشدار
اطلاع
تاریک
<!-- 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>
کلاسیک
نمونه کد
اصلی
اصلی
<!-- badge --> <span class="badge bg-primary rounded-none">Primary</span> <!-- badge outline --> <span class="badge badge-outline-primary rounded-none">Primary</span>
نشانه با سرفصل
نمونه کدنشان ها برای مطابقت با اندازه عنصر والد فوری با استفاده از اندازه نسبی قلم و واحدهای 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>
نشان های سفارشی
نمونه کد
محمد کلانتر
رضا علوی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>
© روشاک