آموزش Utilities در بوت استرپ | کلاس های کاربردی برای کنترل چیدمان و نمایش

در آموزش Utilities در بوت استرپ با مجموعه ای از کلاس های آماده آشنا می شوید که به توسعه دهنده کمک می کنند تا به راحتی محتوا را نمایش دهد، پنهان کند، تراز کند یا فاصله گذاری را کنترل کند. این کلاس ها سرعت طراحی صفحات واکنش گرا برای موبایل و دسکتاپ را به شکل چشمگیری افزایش می دهند.

تنظیم نوع نمایش (Display) در بوت استرپ

کلاس های نمایشی در بوت استرپ امکان کنترل نمایش عناصر را فراهم می کنند. با ترکیب این کلاس ها با سیستم گرید، محتوا یا اجزای دیگر می توانید مشخص کنید هر عنصر در چه اندازه ای از صفحه نمایش داده شود یا مخفی بماند.

گزینه های فلکس باکس (Flexbox)

بوت استرپ از فلکس باکس به عنوان پایه بسیاری از اجزای خود استفاده می کند. البته اعمال مستقیم display: flex روی همه عناصر توصیه نمی شود، چون ممکن است رفتار پیش فرض مرورگر تغییر کند. بیشتر اجزای بوت استرپ به صورت پیش فرض از فلکس باکس پشتیبانی می کنند.

برای افزودن فلکس باکس به یک عنصر خاص، کافی است کلاس .d-flex یا نسخه واکنش گرای آن مانند .d-sm-flex را به آن اضافه کنید. با استفاده از این کلاس ها می توانید به ابزارهای تراز، اندازه دهی، فاصله گذاری و دیگر قابلیت های فلکس باکس دسترسی داشته باشید.

فاصله گذاری با Margin و Padding در بوت استرپ

اگر بخواهید اندازه و فاصله یک عنصر را تغییر دهید، می توانید از کلاس های margin و padding استفاده کنید. این ابزارها بر پایه مقیاس فاصله دهی شش سطحی ساخته شده اند که مقدار پایه آن از متغیر Sass برابر با 1rem تعریف شده است.

همچنین می توانید فاصله گذاری را برای اندازه های خاصی از صفحه مشخص کنید. برای نمونه، کلاس .me-sm-3 فاصله سمت راست را از اندازه sm به بعد برابر با 1rem تنظیم می کند. اگر بخواهید این فاصله در تمام اندازه ها اعمال شود، کلاس .me-3 گزینه مناسب تری است.

نمایش یا پنهان کردن عناصر (Toggle Visibility)

برای مخفی کردن یک عنصر بدون حذف آن از ساختار صفحه، می توانید از ابزارهای Visibility استفاده کنید. این ابزارها کمک می کنند تا عنصر در چیدمان باقی بماند ولی برای کاربر قابل مشاهده نباشد.

اگر به دنبال تسلط کامل بر این کلاس های کاربردی هستید، پیشنهاد می کنیم صفحه آموزش طراحی سایت با بوت استرپ مشاهده کنید. در آنجا نحوه استفاده عملی از همین کلاس ها در پروژه های واقعی را یاد می گیرید.

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.