قسمت سی و یکم bootstrap : نحوه ی استفاده از Utilities در بوت استرپ 4

خانه » مقالات اموزشی » css » بوت استرپ » قسمت سی و یکم bootstrap : نحوه ی استفاده از Utilities در بوت استرپ 4
Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت سی و یکم bootstrap : نحوه ی استفاده از Utilities در بوت استرپ 4

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

Calendar-amico (2)

تاریخ به‌روزرسانی:

۱۴۰۰-۰۲-۱۴

Work time-rafiki

زمان مطالعه:

5 دقیقه

بوت استرپ دارای قابلیت های جذابی است که بدون نیاز به نوشتن خط کد css می توانید از آن استفاده کنید .

در این قسمت از آموزش بوت استرپ 4 قرار است با هم در رابطه با Utilities صحبت کنیم .

پیشنهاد می کنم قبل از ورود به این قسمت ، قسمت های پیشین دوره رایگان بوت استرپ 4 را مطالعه فرمایید.

Utilities یا راهنماهای کمکی

بوت استرپ 4 دارای کلاسهای کمکی زیادی است که به شما کمک می کند در کمترین زمان بدون استفاده از نوشتن خط کد css به نتیجه ی دلخواه خود برسید.

حاشیه ها ( Borders )

برای افزودن یا حذف کردن حاشیه ها می توانید از کلاس .border استفاده کنید. برای درک بهتر به قطعه کد زیر توجه کنید.

حاشیه های رنگی

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

شعاع مرزی ( Border Radius )

با استفاده از کلاس rounded می توانید حاشیه های گرد به المان خود اضافه کنید . برای درک بهتر قطعه کد زیر را اجرا کنید.

حالت شناور و ثابت کردن ( Float and Clearfix )

برای شناور کردن المان به سمت راست از کلاس .float-right ، برای شناور کردن المان به سمت چپ از کلاس .float-left و ثابت کردن و از بین بردن حالت شناور از کلاس باید استفاده کرد ، برای درک بهتر به قطعه کد زیر توجه کنید:

حالت واکنشگرای شناور ( Responsive Floats )

شناورکردن یک المان به سمت راست یا چپ براساس عرض مانیتور ، با استفاده از کلاس های واکنشگرا .float-*-left|right اتفاق می افتد. ( بجای علامت ستاره از عبارت های sm برای عرض های کوچکتر یا مساوی 576px و md برای عرض های کوچتر یا مساوی 768px و lg برای عرض های کوچکتر یا مساوی 992px و xl برای عرضهای کوچکتر یا مساوی 1200px استفاده می شود.)

برای درک بهتر به قطعه کد زیر توجه کنید.

وسط چین

با استفاده از کلاس .mx-auto المان خود را وسط چین کنید ( این کلاس هم از سمت راست و هم از سمت چپ حالت شناور اتوماتیک اضافه میکند ، float-right:auto; float-left:auto;

برای درک بهتر به قطعه کد زیر توجه کنید:

عرض

برای تنظیم کردن عرض کافی است از کلاس w-* استفاده کنیم . (.w-25, .w-50, .w-75, .w-100, .mw-100 ) برای درک بهتر به قطعه کد زیر توجه کنید :

ارتفاع

برای تنظیم کردن ارتفاع هم باید مانند عرض عمل کرد با این تفاوت که کلاس ارتفاع h-* است. ( .h-25, .h-50, .h-75, .h-100, .mh-100 ) برای درک بهتر به قطعه کد زیر توجه کنید :

فاصله

بوت استرپ 4 دارای طیف گسترده ای از کلاسهای مفید margin و padding واکنشگرا است. کلاسهای دارای نقاطی برای تغییر شرایط هستند : xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):

کلاسها در قالب روبرو استفاده می شوند : {اندازه}-{جهت}{ویژگی} برای حالت xs ، برای باقی حالت از قالب {اندازه}-{نقطه تغییر}-{جهت}{ویژگی} استفاده می شود.

برخی از ویژگی ها :

  • m برای margin
  • p برای padding

برخی از جهت ها:

  • 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
  • هنگامی که المان جهت خالی باشد برای چهارجهت margin یا padding اعمال می شود.

برخی از اندازه ها:

  • 0 برای قراردادن margin یا padding برابر 0 است.
  • 1 برای قراردادن margin یا padding برابر .25rem (4px اگر فونت باشد 16px) است.
  • 2 برای قراردادن margin یا padding برابر .5rem (8px اگر فونت باشد 16px) است.
  • 3 برای قراردادن margin یا padding برابر 1rem (16px اگر فونت باشد 16px) است.
  • 4 برای قراردادن margin یا padding برابر 1.5rem (24px اگر فونت باشد 16px) است.
  • 5 برای قراردادن margin یا padding برابر 3rem (48px اگر فونت باشد 16px) است.
  • auto برای قراردادن margin:auto; است.

به یاد داشته باشید که margin را می توانید با استفاده از کلاس n1 , n2 , n3 ,n4 و n5 منفی کنید.

برای درک بهتر استفاده از فاصله ها به قطعه کد زیر توجه کنید :

سایه ها

برای افزودن سایه به المان ها کافی است از کلاس shadow- استفاده کنید. برای درک بهتر به قطعه کد زیر توجه کنید :

تراز عمودی

از کلاسهای align- برای تغییر ترازبندی عناصر استفاده کنید (فقط در عناصر درون خطی ، بلوک درون خطی ، جدول درون جدول و سلول جدول کار می کند):

Embed واکنشگرا

Embedهای ویدئویی واکنشگرا یا اسلایدشو را بر اساس عرض والدین ایجاد کنید. آیتم .embed-responsive را به هر عنصر تعبیه شده (مانند < iframe > یا < video >) در یک عنصر والد با .embed-responsive و نسبت ابعاد مورد نظر خود اضافه کنید:

نمایش

با استفاده از کلاس های .visible یا .invisible قابلیت نمایش المان را کنترل کنید. به یاد داشته باشید که این کلاس ها مقدار نمایش CSS را تغییر نمی دهند آنها فقط ویژگی visibility:visible یا visibility:hidden را به المان اضافه می کنند.

موقعیت ها

با استفاده از کلاس .fixed-top می توانید یک المان را ثابت در بالای صفحه ی خود داشته باشید .

با استفاده از کلاس .fixed-bottom می توانید یک المان را ثابت در پایین صفحه ی خود داشته باشید.

با استفاده از کلاس .sticky-top می توانید یک المان را هنگامی که صفحه از روی المان عبور می کند ( اسکرول می کند ) ثابت در بالا نگه دارید . به یاد داشته باشید که این کلاس در IE11 و نسخه های قبلی کار نمی کند.

نماد بستن

برای سبک کردن یک نماد بسته از کلاس .close استفاده کنید. این اغلب برای هشدارها و روشهای معمول استفاده می شود. توجه داشته باشید که ما از & times؛ نماد برای ایجاد نماد واقعی (“x” با ظاهر بهتر). همچنین توجه داشته باشید که به طور پیش فرض درست شناور است:

صفحه خوان ها ( Screenreaders )

با استفاده از کلاس .sr-only المان خود را فقط در صفحه خوان ها نمایش دهید و از دید تمامی دستگاه های دیگر مخفی کنید :

رنگ ها

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

عناصر بلوک

برای ایجاد یک عنصر به یک عنصر بلوک ، کلاس .d-block را اضافه کنید. برای کنترل زمانی که عنصر باید یک عنصر بلوک در یک عرض خاص صفحه باشد ، از هر یک از کلاس های d-*-block استفاده کنید:

فلکس

برای کنترل طرح با flexbox از کلاسهای .flex-* استفاده کنید.

جلسه ی بعدی توضیحات کاملتری در رابطه با فلکس ها باهم بررسی خواهیم کرد.

سخن پایانی

پیشنهاد میکنم برای دریافت اطلاعات بیشتر به سایت getbootstrap مراجعه کنید . همچنین می توانید از سایر جلسات دوره رایگان بوت استرپ 4 استفاده کیند.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

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