ابزارهای قالب
کلاس‌های CSS کاربردی و نحوه استفاده از آن‌ها
Vulk با برخی از ابزارهای داخلی ارائه می‌شود که به شما کمک می‌کند بدون نوشتن CSS اضافی کدنویسی کنید. برخی از ابزارها دارای مقادیری هستند که در اینجا نیز فهرست شده‌اند. با بررسی کد قالب، ابزارهای مفید بیشتری پیدا خواهید کرد.
| دسته‌بندی | کلاس | شرح | مقادیر قابل پذیرش |
|---|---|---|---|
| وضعیت | is-hidden | اعمال نمایش هیچ به عنصر هدف | - |
| وضعیت | is-disabled | غیرفعال کردن عنصر هدف | - |
| حاشیه‌بندی | has-border | اعمال حاشیه به عنصر هدف | - |
| حاشیه‌بندی | is-circle | اعمال شعاع حاشیه 50% به عنصر هدف | - |
| حاشیه‌بندی | is-rounded-md | اعمال شعاع حاشیه 0.625rem به عنصر هدف | - |
| حاشیه‌بندی | is-rounded-lg | اعمال شعاع حاشیه 0.825rem به عنصر هدف | - |
| سایه‌بندی | is-disabled | اعمال سایه سبک به عنصر هدف | - |
| ارتفاع | height-full | اعمال ارتفاع: 100% به عنصر هدف | - |
| ارتفاع | height-screen | اعمال ارتفاع: 100vh به عنصر هدف | - |
| عرض | w-* | اعمال عرض خاص به عنصر هدف | full, 1/5, 1/4, 1/3, 1/2 |
| عرض | max-w-* | اعمال حداکثر عرض خاص به عنصر هدف | full, 1/5, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8, 9 |
| عرض | max-w-mobile | تنظیم عرض عنصر هدف به 100% در دستگاه‌های موبایل | - |
| لبه (margin) | no-m | تنظیم حاشیه عنصر هدف به 0 | - |
| لبه (margin) | mx-auto | تنظیم حاشیه شروع و پایان عنصر هدف به خودکار | - |
| لبه (margin) | m-* | اعمال حاشیه خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| لبه (margin) | mx-* | اعمال حاشیه افقی خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| لبه (margin) | my-* | اعمال حاشیه عمودی خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| لبه (margin) | ms-* | اعمال حاشیه شروع خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| لبه (margin) | me-* | اعمال حاشیه پایان خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| لبه (margin) | mt-* | اعمال حاشیه بالا خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| لبه (margin) | mb-* | اعمال حاشیه پایین خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| فاصله‌گذاری (padding) | p-* | اعمال padding خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| فاصله‌گذاری (padding) | px-* | اعمال padding افقی خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| فاصله‌گذاری (padding) | py-* | اعمال padding عمودی خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| فاصله‌گذاری (padding) | ps-* | اعمال padding شروع خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| لبه (margin) | pe-* | اعمال padding پایان خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| فاصله‌گذاری (padding) | pt-* | اعمال padding بالا خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| فاصله‌گذاری (padding) | pb-* | اعمال padding پایین خاص به عنصر هدف | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| شفافیت (padding) | opacity-* | اعمال شفافیت خاص به عنصر هدف | 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 |
| رنگ‌بندی | text-* | اعمال رنگ خاص به عنصر هدف | white, primary, secondary, success, info, warning, danger, orange, blue, yellow, purple, green, light |
| رنگ پس‌زمینه | bg-* | اعمال رنگ پس‌زمینه خاص به عنصر هدف | white, primary, secondary, success, info, warning, danger, orange, blue, yellow, purple, green, light |
| اندازه نسبت 1:1 | size-* | اعمال اندازه پیکسلی نسبت 1:1 خاص به عنصر هدف | 24x24, 28x28, 32x32, 36x36, 40x40, 44x44, 48x48, 52x52, 56x56, 60x60, 70x70, 80x80, 90x90, 100x100, 110x110, 120x120, 130x130, 140x140, 150x150, 175x175, 200x200 |
| سرریزی (overflow) | overflow-hidden | تنظیم overflow عنصر هدف به مخفی | - |
| سرریزی (overflow) | overflow-x-auto | تنظیم overflow-x عنصر هدف به خودکار | - |
| سرریزی (overflow) | overflow-y-auto | تنظیم overflow-y عنصر هدف به خودکار | - |
| شاخص عمودی (z-index) | z-* | تنظیم z-index عنصر هدف به مقدار مشخص شده | 0, 1, 2, 3 |
| اندازه فونت | rem-* | تنظیم اندازه فونت عنصر هدف به مقدار rem مشخص شده | 50, 60, 70, 75, 80, 85, 90, 95, 100, 115, 125, 150, 175, 200 |
| وزن فونت | weight-* | تنظیم وزن فونت عنصر هدف به مقدار مشخص شده | 3, 4, 5, 6, 7 |