کلاس های کمکی در بوت استرپ 4

بوت استرپ 4 تعداد زیادی کلاس کمکی که اصطلاحا به آنها utility یا helper گفته می شود دارد که طراحان را از نوشتن کدهای css بی نیاز می کند.

کلاس های کمکی در بوت استرپ عمده نیاز طراحان صفحات وب را برآورده می کند. به طور مثال قبلا از بوت استرپ 4 اگر می خواستیم به یک div خاصیت های padding یا margin را اعمال کنیم لازم بود به آن div یک کلاس اختصاص دهیم و سپس در فایل css خاصیت های padding و margin را مقدار دهی کنیم. در فایل html:

و در فایل css:

.intro{
   padding:16px;
   margin:16px;
}

اما در بوت استرپ 4 نیازی به این کار نیست و کافی است از کلاس های کمکی spacing استفاده کنیم:

p-3 و m-3 کلاس های کمکی هستند که همان کار padding و margin را مثال قبلی انجام می دهند.

تعداد کلاس های کمکی در بوت استرپ زیاد است و در بروز رسانی ها نیز به آنها اضافه می شود. در ادامه این آموزش جهت آشنایی به آنها اشاره می کنیم. برای یادگیری کامل آنها به بصورت عملی نیز می توانید به دوره آموزش بوت استرپ 4 مراجعه کنید و یا می توانید به سایت getbootstrap قسمت Documentation و سپس به قسمت utilities رجوع کنید.

• Borders

برای ایجاد یا حذف خطوط حاشیه و یا تعیین رنگ آنها استفاده می شوند.

• Display

در css خاصیتی داریم به نام display که مقادیر مختلفی دارد. به کمک این کلاس های کمکی می توان همه آن خصوصیات را بدون نیاز به کد نویسی css و حتی بصورت واکنش گرا استفاده کرد.

• Flex

Flex box یکی از تکنولوژی های css است که برای لایه بندی صفحات از آن استفاده می شود. بوت استرپ کلاس های کاملی از دستورات مربوط به flex را آماده و در اختیار برنامه نویسان قرار داده است که به طور چشمگیری استفاده از این تکنولوژی را ساده کرده است.

• Float

تکنولوژی قدیمی css برای لایه بندی صفحات است که کلاس های کمکی آن همچنان موجود هستند.

• Position

در css دستوری داریم به نام position که موقعیت یک عنصر را نسبت به عنصر دیگر تعیین می کند. از کلاس های کمکی position می توان به جای دستورات css استفاده کرد.

• Sizing

به جای خصوصیات width و height در css مورد استفاده قرار می گیرد.

• Spacing

مجموعه کلاس های کمکی بسیار پرکاربرد که طراحان را از نوشتن دستورات متعدد padding و margin در css بی نیاز می کند.

• Text

کلاس های کمکی متعددی که در بحث تایپوگرافی جایگزین دستورات css شده اند. یعنی به نوعی آنها را پیاده سازی کرده اند.

• Shadows

برای ایجاد سایه و برجسته کردن یک عنصر از آن استفاده می شود.

در اینفوگرافیک زیر می توانید خلاصه این مقاله را مشاهده نمایید.