مثال های گوناگون
برای تغییر ظاهر یک نشان، یکی از کلاس های اصلاح کننده نام برده زیر را اضافه کنید.
سبک پیش فرض
- اولیه
- ثانویه
- موفقیت آمیز
- اخطار
- هشدار
- اطلاعات
- تاریک
- خاکستری
- روشن
- اولیه
- ثانویه
- موفقیت آمیز
- اخطار
- هشدار
- اطلاعات
- تاریک
- خاکستری
- روشن
- اولیه
- ثانویه
- موفقیت آمیز
- اخطار
- هشدار
- اطلاعات
- تاریک
- خاکستری
- روشن
- اولیه
- ثانویه
- موفقیت آمیز
- اخطار
- هشدار
- اطلاعات
- تاریک
- خاکستری
- روشن
| مرجع کلاس | جزئیات |
|---|---|
.bg-{state} |
از {state} به عنوان primary، secondary، success، info، warning، danger، dark، gray، light استفاده می شود |
.bg-outline-{state} |
مانند {state} بالا |
.rounded-pill |
برای سبک نشان گرد از کلاس .rounded استفاده کنید.
|
مثال کد
<span class="badge bg-primary">...</span> <span class="badge bg-outline-primary">...</span>
مثال کد
<span class="badge rounded-pill bg-primary">...</span> <span class="badge rounded-pill bg-outline-primary">...</span>
سبک نقطه ای
از کلاس اصلاح کننده .badge-dot برای ایجاد نشان های سبک نقطه ای استفاده کنید.
- اولیه
- ثانویه
- موفقیت آمیز
- اخطار
- هشدار
- اطلاعات
- تاریک
- خاکستری
- روشن
مثال کد
<span class="badge badge-dot bg-primary">اولیه</span>
سبک تیره/کم رنگ
از کلاس اصلاح کننده .badge-dim برای ایجاد نشان های با رنگ روشن / کم رنگ استفاده کنید.
سبک کم رنگ
- اولیه
- ثانویه
- موفقیت آمیز
- اخطار
- هشدار
- اطلاعات
- تاریک
- خاکستری
- روشن
- اولیه
- ثانویه
- موفقیت آمیز
- اخطار
- هشدار
- اطلاعات
- تاریک
- خاکستری
- روشن
- اولیه
- ثانویه
- موفقیت آمیز
- اخطار
- هشدار
- اطلاعات
- تاریک
- خاکستری
- روشن
- اولیه
- ثانویه
- موفقیت آمیز
- اخطار
- هشدار
- اطلاعات
- تاریک
- خاکستری
- روشن
مثال کد
<span class="badge badge-dim bg-primary">اولیه</span> <span class="badge badge-dim rounded-pill bg-primary">اولیه</span>
مثال کد
<span class="badge badge-dim bg-outline-primary">اولیه</span> <span class="badge badge-dim rounded-pill bg-outline-primary">اولیه</span>
اندازه نشان
از کلاس اصلاح کننده .badge-{size} برای کنترل اندازه نشان ها استفاده کنید.
سبک پیش فرض
- اولیه
- اولیه
- اولیه
- اولیه
- اولیه
- اولیه
- اولیه
- اولیه
- اولیه
- اولیه
| مرجع کلاس | جزئیات |
|---|---|
.badge-{size} |
از {size} به عنوان sm، md، lg، xl استفاده می شود |
مثال کد
<span class="badge badge-md bg-primary">اولیه</span>
مثال کد
<span class="badge rounded-pill badge-md bg-primary">اولیه</span>
