ابزارها (Utilities)
کلاس های کمکی بوت استرپ، استایل آماده می دهند. بدون نوشتن CSS جدا. مثل زنگ تفریح برنامه نویس ها برای سریع کاری!
بوردرها (Borders)
برای نمایش یا حذف بوردر از کلاس های border استفاده کن.
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
ضخامت بوردر
از .border-1 تا .border-5 ضخامت را تغییر بده.
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
رنگ بوردر
با کلاس های زمینه ای، رنگ بوردر تعیین می شود. مثل .border-primary.
<span class="border border-primary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-dark"></span>
گوشه های گرد (Border Radius)
کلاس های rounded گوشه ها را گرد می کنند. قرص و دایره هم داریم.
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-4"></span>
<span class="rounded-5"></span>
شناوری و کلیر (Float & Clearfix)
با .float-start چپ برو. با .float-end راست برو. با .clearfix جمع کن.
<div class="clearfix">
<span class="float-start">Float left</span>
<span class="float-end">Float right</span>
</div>
شناوری واکنش گرا
با .float-sm|md|lg|xl|xxl-* در عرض های مختلف شناور شو.
<div class="float-sm-end">Small and up</div>
<div class="float-md-end">Medium and up</div>
<div class="float-lg-end">Large and up</div>
<div class="float-xl-end">XL and up</div>
<div class="float-xxl-end">XXL and up</div>
<div class="float-none">Float none</div>
وسط چینی افقی
کلاس .mx-auto با عرض مشخص، عنصر را وسط می آورد.
<div class="mx-auto bg-warning" style="width:200px">Centered</div>
عرض و ارتفاع
از .w-25 تا .w-100 و .h-25 تا .h-100 استفاده کن.
<div class="w-25 p-2 bg-warning">Width 25%</div>
<div class="w-50 p-2 bg-warning">Width 50%</div>
<div class="w-75 p-2 bg-warning">Width 75%</div>
<div class="w-100 p-2 bg-warning">Width 100%</div>
<div style="height:200px;background-color:#ddd">
<div class="h-25 d-inline-block bg-warning">Height 25%</div>
<div class="h-50 d-inline-block bg-warning">Height 50%</div>
<div class="h-75 d-inline-block bg-warning">Height 75%</div>
<div class="h-100 d-inline-block bg-warning">Height 100%</div>
</div>
نکته: برای ارتفاع جزئیات بیشتر، نمونه «Height» را هم ببین.
فاصله ها (Spacing)
کلاس های m و p برای مارجین و پدینگ اند. اندازه ها 0 تا 5 هستند.
<div class="pt-4 bg-warning">Top padding 1.5rem</div>
<div class="p-5 bg-success">All padding 3rem</div>
<div class="m-5 pb-5 bg-info">Margin 3rem and bottom padding 3rem</div>
سایه ها (Shadows)
با .shadow-* سایه کوچک تا بزرگ بساز.
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
تراز عمودی
کلاس های align-* فقط روی عناصر inline و مشابه کار می کنند.
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
نسبت تصویر (Aspect Ratio)
با .ratio و یک نسبت مثل .ratio-16x9 ویدئو واکنش گرا بساز.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
نمایش/مخفی بودن (Visibility)
با .visible و .invisible فقط خاصیت visibility تغییر می کند.
<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>
آیکن بستن
کلاس .btn-close برای دکمه بستن استفاده می شود.
<button type="button" class="btn-close"></button>
متن فقط برای صفحه خوان
کلاس .visually-hidden متن را فقط برای screen reader نگه می دارد.
<span class="visually-hidden">Only for screen readers</span>
رنگ متن
با .text-* رنگ متن را عوض کن. لینک ها هم می توانند.
<p class="text-primary">Important text</p>
<p class="text-success">Success text</p>
<p class="text-warning">Warning text</p>
<a href="#" class="text-danger">Danger link</a>
<p class="text-black-50">Black 50% opacity</p>
<p class="text-white-50 bg-dark">White 50% opacity</p>
رنگ پس زمینه
با .bg-*.text-bg-*
<div class="text-bg-primary p-2">Primary</div>
<div class="text-bg-success p-2">Success</div>
<div class="text-bg-info p-2">Info</div>
<div class="text-bg-warning p-2">Warning</div>
<div class="text-bg-danger p-2">Danger</div>
<div class="text-bg-dark p-2">Dark</div>
<div class="text-bg-light p-2">Light</div>
گام های عملی
- نیازت را مشخص کن؛ فاصله، رنگ، سایه یا اندازه.
- کلاس Utility مناسب را روی عنصر اضافه کن.
- در نمایشگرهای مختلف، کلاس های واکنش گرا را تست کن.
جمع بندی سریع
- Utilityها سرعت ساخت صفحه را بالا می برند.
- بدون CSS سفارشی هم پیش می روی.
- برای ریسپانسیو از پسوندهای breakpoints استفاده کن.
- ترکیب کلاس ها نتیجه حرفه ای تر می دهد.
مطالب مرتبط: آف کانواس (Offcanvas)، رنگ ها (Colors).