ابزار رنگ
با چند کلاس کاربردی رنگ معنا را از طریق رنگ منتقل کنید. این ابزار به سرعت متن و پس زمینه هر عنصر را سبک می دهد.
رنگ پس زمینه
مجموعه ای از کلاس های کاربردی پس زمینه تک رنگ. برای تنظیم رنگ پس زمینه از کلاس های .bg-{color} در عنصر استفاده کنید.
رنگ های تم
primary
secondary
dark
gray
success
danger
warning
info
رنگ های کم رنگ تم
primary
secondary
dark
gray
success
danger
warning
info
رنگ های روشن تم
light
lighter
white
رنگ های اضافی
blue
azure
indigo
purple
pink
orange
teal
رنگ های کم رنگ اضافی
blue
azure
indigo
purple
pink
orange
teal
| مرجع کلاس | تم/رنگ |
|---|---|
.bg-{theme} |
primary | secondary | success | info | warning | danger | dark | gray |
.bg-{theme}-dim
|
برای رنگ های pale/dim (کم رنگ/تیره) و {theme} مانند بالا استفاده کنید
|
.bg-{color}
|
blue | azure | indigo | purple | pink | orange | teal |
.bg-{color}-dim
|
برای رنگ های کم رنگ/تیره و {color} مانند بالا استفاده کنید
|
.bg-light |
برای پس زمینه روشن استفاده کنید |
.bg-lighter |
برای پس زمینه خیلی روشن استفاده کنید |
.bg-white |
برای پس زمینه سفید استفاده کنید |
.bg-transparent |
برای پس زمینه شفاف استفاده کنید |
مثال استفاده
<div class="bg-primary"> ... </div> <div class="bg-primary is-dim"> ... </div>
رنگ های خاکستری و تاریک
مجموعه ای از رنگ های سایه از کلاس های خاکستری و تاریک. برای تنظیم رنگ پس زمینه از کلاس .bg-gray-{value} در عنصر استفاده کنید.
100
200
300
400
500
600
700
800
900
| مرجع کلاس | مقدار |
|---|---|
.bg-gray-{value} |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
مثال استفاده
<div class="bg-gray-200"> ... </div>
رنگ متن
مجموعه ای از کلاس های کاربردی رنگ متن. برای تنظیم رنگ متن از کلاس .text-{theme|color} در عنصر استفاده کنید.
| مرجع کلاس | پیش نمایش |
|---|---|
.text-primary |
متن با رنگ اولیه |
.text-secondary |
متن با رنگ ثانویه |
.text-success |
متن با رنگ موفقیت |
.text-danger |
متن با رنگ اخطار |
.text-warning |
متن با رنگ هشدار |
.text-info |
متن با رنگ اطلاعات |
.text-body |
متن با رنگ بدنه |
.text-dark |
متن با رنگ تاریک |
.text-base |
متن با رنگ پایه |
.text-soft |
متن با رنگ ملایم |
.text-black-50 |
متن با رنگ مشکی 50% |
.text-light |
متن با رنگ روشن |
.text-lighter |
متن با رنگ روشن تر |
.text-white |
متن با رنگ سفید |
.text-{theme}.text-{theme}-dim
|
برای رنگ متن و کاربر از -dim برای رنگ کم رنگ استفاده کنید. از {theme} به عنوان primary، secondary، success، info، warning، danger، dark، gray استفاده می شود
|
.text-{color}.text-{color}-dim
|
برای رنگ متن و کاربر از -dim برای رنگ کم رنگ استفاده کنید.از {color} به عنوان blue، azure، indigo، purple، pink، orange، teal استفاده می شود
|
مثال استفاده
<p class="text-primary"> ... </p> <span class="text-primary"> ... </span>
