بک گراندهای رنگی مختلف با کلاس های مختلف آماده
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900
.bg-white
.bg-transparent
<p class="bg-primary text-white py-2 px-4">.bg-primary</p>
<p class="bg-secondary py-2 px-4">.bg-secondary</p>
<p class="bg-success text-white py-2 px-4">.bg-success</p>
<p class="bg-danger text-white py-2 px-4">.bg-danger</p>
<p class="bg-warning text-white py-2 px-4">.bg-warning</p>
<p class="bg-info text-white py-2 px-4">.bg-info</p>
<p class="bg-light text-dark py-2 px-4">.bg-light</p>
<p class="bg-dark text-white py-2 px-4">.bg-dark</p>
<p class="bg-gray-100 text-dark-50 py-2 px-4">.bg-gray-100</p>
<p class="bg-gray-200 text-dark-50 py-2 px-4">.bg-gray-200</p>
<p class="bg-gray-300 text-dark-50 py-2 px-4">.bg-gray-300</p>
<p class="bg-gray-400 text-dark-50 py-2 px-4">.bg-gray-400</p>
<p class="bg-gray-500 text-dark-50 py-2 px-4">.bg-gray-500</p>
<p class="bg-gray-600 text-white py-2 px-4">.bg-gray-600</p>
<p class="bg-gray-700 text-white py-2 px-4">.bg-gray-700</p>
<p class="bg-gray-800 text-white py-2 px-4">.bg-gray-800</p>
<p class="bg-gray-900 text-white py-2 px-4">.bg-gray-900</p>
<p class="bg-white text-dark py-2 px-4">.bg-white</p>
<p class="bg-transparent text-dark py-2 px-4">.bg-transparent</p>
استفاده .bg-hover-{color}می توانید رنگ را با نام کلاس را مشخص کنید:
<div class="bg-gray-200 bg-hover-primary"></div>
<div class="bg-gray-200 bg-hover-success"></div>
<div class="bg-gray-200 bg-hover-danger"></div>
<div class="bg-gray-200 bg-hover-warning"></div>
<div class="bg-gray-200 bg-hover-dark"></div>
<div class="bg-gray-200 bg-hover-info"></div>
استفاده .bg-hover-state-{color} کلاس های مختلف برای رنگ های مختلف بک گراند زمان هاور کردن:
<div class="bg-gray-200 bg-hover-state-primary"></div>
<div class="bg-gray-200 bg-hover-state-success"></div>
<div class="bg-gray-200 bg-hover-state-danger"></div>
<div class="bg-gray-200 bg-hover-state-warning"></div>
<div class="bg-gray-200 bg-hover-state-dark"></div>
<div class="bg-gray-200 bg-hover-state-info"></div>
افزودن 2 عدد rounded-sm و rounded-lg جهت گرد کردن گوشه ها:
<div class="bg-gray-200 rounded-sm"></div>
<div class="bg-gray-200 rounded"></div>
<div class="bg-gray-200 rounded-lg"></div>گرد کردن گوشه های خاص:
<div class="bg-gray-200 rounded-lg rounded-top-0"></div>
<div class="bg-gray-200 rounded-lg rounded-bottom-0"></div>
<div class="bg-gray-200 rounded-lg rounded-left-0"></div>
<div class="bg-gray-200 rounded-lg rounded-right-0"></div>
استفاده bg-radial-gradient-{color} کلاس ها مختلف تعیین شده را می توانید جهت تعیین رنگ گرادینت استفاده کنید .
<div class="bg-radial-gradient-primary"></div>
<div class="bg-radial-gradient-success"></div>
<div class="bg-radial-gradient-info"></div>
<div class="bg-radial-gradient-danger"></div>
<div class="bg-radial-gradient-warning"></div>
<div class="bg-radial-gradient-dark"></div>
استفاده bg-{color}-o-{opacity} از این کلاس ها برای ایجاد شفافیت وکدری بک گراند 1 to 20(0.5 - 1).
به عنوان مثال, bg-primary-o-10باopacity: 0.1.
<div class="bg-primary-o-10"></div>
<div class="bg-primary-o-20"></div>
<div class="bg-primary-o-30"></div>
<div class="bg-primary-o-40"></div>
<div class="bg-primary-o-50"></div>
<div class="bg-primary"></div>
<div class="bg-success-o-10"></div>
<div class="bg-success-o-20"></div>
<div class="bg-success-o-30"></div>
<div class="bg-success-o-40"></div>
<div class="bg-success-o-50"></div>
<div class="bg-success">
<div class="bg-warning-o-10"></div>
<div class="bg-warning-o-20"></div>
<div class="bg-warning-o-30"></div>
<div class="bg-warning-o-40"></div>
<div class="bg-warning-o-50"></div>
<div class="bg-warning">
<div class="bg-danger-o-10"></div>
<div class="bg-danger-o-20"></div>
<div class="bg-danger-o-30"></div>
<div class="bg-danger-o-40"></div>
<div class="bg-danger-o-50"></div>
<div class="bg-danger"></div>
استفاده .bg-diagonal, .bg-diagonal-{color} و .bg-diagonal-r-{color} از این کلاس ها استفاده کنید.
<div class="bg-diagonal bg-diagonal-primary bg-diagonal-r-light rounded h-150px"></div>
<div class="bg-diagonal bg-diagonal-success bg-diagonal-r-danger rounded h-150px"></div>
<div class="bg-diagonal bg-diagonal-info bg-diagonal-r-warning rounded h-150px"></div>
.h-{size}px and .w-{size}px قالب کلاس برای تنظیم ارتفاع و عرض ثابت در پیکسلها به هر عنصر.
.min-h-{size}px and .min-w-{size}px قالب کلاس برای تنظیم حداقل ارتفاع و عرض در پیکسلها به هر عنصر.
.max-w-{size}px and .max-w-{size}px قالب کلاس برای تنظیم حداکثر ارتفاع و عرض در پیکسلها به هر عنصر.
{size} مقادیر را در محدوده می پذیرد 1,2,3,4,5,10,15,20,25,30 ... 95,100,125,150,175,200,225 ... 500,550,600,650 ...1000.
<div class="bg-gray-100 w-75px h-75px mr-2"></div>
<div class="bg-gray-100 min-w-100px min-h-100px mr-2"></div>
<div class="bg-gray-100 max-w-125px max-h-125px">
این یک متن تستی هست برای نمایش مثال ها این بخش
</div>
sm,md,lg,xl,xxl
.h-{breakpoint}-{size}px و .w-{breakpoint}-{size}px قالب کلاس برای تنظیم ارتفاع و عرض ثابت در پیکسلها به هر عنصر.
.min-h-{breakpoint}-{size}px و .min-w-{breakpoint}-{size}px قالب کلاس برای تنظیم حداقل ارتفاع و عرض در پیکسلها به هر عنصر.
.max-w-{breakpoint}-{size}px و .max-w-{breakpoint}-{size}px قالب کلاس برای تنظیم حداکثر ارتفاع و عرض در پیکسلها به هر عنصر.
<div class="bg-gray-100 w-50px h-50px w-lg-75px h-lg-75px mr-2"></div>
<div class="bg-gray-100 min-w-50px min-h-50px min-w-lg-100px min-h-lg-100px mr-2"></div>
<div class="bg-gray-100 max-w-75px max-h-75px max-w-125px max-h-125px">
این یک متن تستی هست برای نمایش مثال ها این بخش
</div>
کلاس های مختلف فاصله گذاری
1 تا 40 .
<div class="d-flex align-items-center">
<span class="p-5 bg-light mr-2">
.p-5
</span>
<span class="p-10 bg-light mr-2">
.p-10
</span>
<span class="p-15 bg-light mr-2">
.p-15
</span>
</div>
<div class="d-flex align-items-center">
<span class="m-5 p-5 bg-light">
.m-5
</span>
<span class="m-10 p-5 bg-light">
.m-10
</span>
<span class="m-15 p-5 bg-light">
.m-15
</span>
</div>
