آموزش کار با کلاس‌های کمکی Utility Classes در بوت‌استرپ 4


نویسنده:
سه شنبه ۱۱ آذر ۱۳۹۹
utility در بوت‌استرپ

در این قمست از آموزش رایگان Bootstrap 4 به کلاس‌های کمکی یا utility در بوت‌استرپ خواهیم پرداخت. با استفاده از این کلاس‌ها قادر خواهید بود، به‌راحتی بدون استفاده از کدهای Css به عناصر در صفحه استایل دهید.

کلاس کمکی utility در Bootstrap4

در بوت استرپ کلاس هایی از قبل تعریف شده است که به شما کمک می کند تا بدون استفاده از کدهای CSS بتوانید عناصر را سریع استایل‌دهی کنید. به این کلاس‌ها، کلاس‌های کمکی “utility/helper classes” می‌شود.

border

برای اضافه کردن یا حذف کردن borderها در کد خود می‌توانید از همین کلاس در بوت‌استرپ استفاده کنید. به مثال زیر توجه کنید:

utility در بوت‌استرپ

همانطور که مشاهده می‌کنید، با اضافه کردن کلاس border، یک حاشیه به عنصر اضافه خواهد شد. همچنین با قرار دادن عدد صفر کنار آن، همان حاشیه حذف می‌شود.


float و Clearfix

در کلاس‌های کمکی utility در بوت‌استرپ و نیز CSS برای float و Clearfix تفاوت چندانی وجود ندارند. تنها تفاوت آن‌ها اینست که بوت‌استرپ از کلاس‌های از پیش‌تعریف شده استفاده می‌کند.

اگر می‌خواهید عنصری را به سمت راست صفحه منتقل کنید، از کلاس float-right.استفاده خواهید کرد. همچنین اگر بخواهید عنصری را به سمت چپ صفحه منتقل کنید، از کلاس float-left بهره می‌برید. در نهایت اگر بخواهید از clearfix استفاده کنید، باید کلاس clearfix. را به کد صفحه موردنظر خود اضافه کنید. به مثال زیر توجه کنید:

utility در بوت‌استرپ


قرارگیری عنصر در وسط صفحه

برای قرار دادن عنصر در وسط یک صفحه می‌توانید از کلاس mx-auto. استفاده کنید. این کلاس margin-left و margin-right را برابر auto قرار می دهد:

utility در بوت‌استرپ


ایجاد فضای خالی (spacing)

منظور از spacing همان مقادیر margin و padding می‌باشد که باعث ایجاد فضای خالی بین عناصر یا درون عناصر می‌شود. بوت‌استرپ 4 کلاس‌های margin و padding مختلف و واکنش‌گرایی دارد که نقاط شکست آن‌ها به صورت زیر است:

xsextra small (بسیار کوچک): 576px و کمتر
smsmall (کوچک): 576px و بیشتر
mdmedium (متوسط): 768px و بیشتر
lglarge (بزرگ): 992px و بیشتر
xlextra large (بسیار بزرگ): 1200px و بیشتر

برای استفاده از این کلاس‌ها به‌طور کلی از دستور کلی “property” “sides-size” برای xs و برای سایر کلاس‌ها، براساس دستور کلی “property” “sides-breakpoint-size” پیروی می‌کنیم. به طور کلی،‌ مقدار property باید یکی از مقادیر m برای تعیین margin و یا p برای تعیین padding باشد.

مقدار sides نیز باید یکی از گزینه‌های زیر باشد:

  • t برای تعیین margin-top یا padding-top
  • b برای تعیین margin-bottom  یا padding-bottom
  • l برای تعیین margin-left  یا padding-left
  • r برای تعیین margin-right  یا padding-right
  • x برای تعیین هر دو خصوصیت padding-left  و padding-right یا خصوصیت های margin-left یا margin-right
  • y برای تعیین هر دو خصوصیت padding-top   و padding-bottom یا خصوصیت های margin-top  یا margin-bottom


همچنین مقدار size نیز محدود به گزینه‌های زیر می‌باشد:

مقدار صفرmargin یا padding را 0 قرار می دهد.
مقدار یکmargin یا padding را 25rem. قرار می‌دهد.
(یعنی 4px به شرطی که font-size برابر 16px باشد)
مقدار دوmargin یا padding را 5rem. قرار می‌دهد.
(یعنی 8px به شرطی که font-size برابر 16px باشد)
مقدار سهmargin یا padding را 1rem قرار می‌دهد.
(یعنی 16px به شرطی که font-size برابر 16px باشد)
مقدار چهارmargin یا padding را 1.5rem قرار می‌دهد.
(یعنی 24px به شرطی که font-size برابر 16px باشد)
مقدار پنجmargin یا padding را 3rem قرار می‌دهد.
(یعنی 48px به شرطی که font-size برابر 16px باشد)
autoمقدار margin را برابر auto قرار می دهد.

به مثال زیر توجه کنید:


تراز عمودی عناصر

در utility در بوت‌استرپ برای ترازبندی عمودی عناصر، باید از قالب -align استفاده کنید. توجه داشته باشید که این کلاس تنها روی عناصر inline و inline-block و جداولی که inline باشند کار خواهد کرد.


تایپوگرافی

در قسمت‌های قبلی از آموزش رایگان بوت‌استرپ ۴ درباره تایپوگرافی متون در بوت‌استرپ پرداخته‌ایم. کلاس‌های مربوط به تایپوگرافی در بوت‌استرپ به‌صورت زیر است:

  • کلاس font-weight-bold متون را bold می‌کند.
  • کلاس font-italic متون را مورب می‌کند.
  • کلاس small متن را کوچک می‌کند.
  • کلاس text-justify متن را ترازبندی می‌کند.
  • کلاس list-unstyled استایل‌دهی پیش‌فرض آیتم‌های یک لیست و margin چپ را حذف می‌کند.
  • کلاس pre-scrollable به عنصر <pre> قابلیت اسکرول می‌دهد.
  • کلاس text-capitalize متن را با حروف بزرگ انگلیسی می‌نویسد.
  • کلاس text-right متون را به سمت راست می‌برد.
  • و بسیاری از کلاس‌های دیگر که می‌توانید برای دسترسی به آن‌ها به وب‌سایت اصلی Boostrap مراجعه کنید.

دیدگاهتان را بنویسید

2 پاسخ به “آموزش کار با کلاس‌های کمکی Utility Classes در بوت‌استرپ 4”

  1. امیر حسین شریفی مهر گفت:

    فک نمیکنید با اومدن تایل وایند دیگ آموزش بوت استرپ دیره؟
    خصوصا وقتی که بوت استرپ 5 هم اومده

    • سلام دوست عزیز
      ، Tailwind هنوز فراگیر نشده و در حال حاضر بوت‌استرپ محبوب‌ترین فریمورک css محسوب میشه.
      برای ورژن هم گرچه نسخه‌ی ۵ عرضه شده اما هنوز نسخه‌ی پایدار رو ارائه ندادن پس بهتره کاربرا فعلا از ورژن ۴ استفاده کنن.

      هروقت هم نسخه ۵ به طور کامل منتشر بشه در همین بخش آموزششو قرار میدیم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *