آموزش گاتر در بوت استرپ

در این بخش به معرفی گاتر در بوت استرپ می‌پردازیم. گاتر (Gutter) در بوت استرپ نقش مهمی در ایجاد فاصله بین ستون ها و نظم بخشیدن به ساختار چیدمان دارد. استفاده درست از گاتر باعث می شود محتوا به شکل خواناتر و منظم تری نمایش داده شود و طراحی نهایی سازگار با ابعاد مختلف صفحه باشد.

نحوه عملکرد گاتر در بوت استرپ

بوت استرپ گاترها را با استفاده از فاصله داخلی افقی در ستون ها ایجاد می کند. در هر ستون، ویژگی های padding-left و padding-right باعث می شوند فاصله مشخصی بین محتوای ستون ها به وجود بیاید. مقدار پیش فرض این فاصله 1.5 rem (معادل 24 پیکسل) است که با سیستم فاصله گذاری بوت استرپ هماهنگ طراحی شده است.

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

گاترهای افقی

برای کنترل فاصله افقی بین ستون ها، بوت استرپ کلاس های .gx-* را ارائه می دهد. در صورتی که از گاترهای بزرگ تر استفاده شود، بهتر است برای جلوگیری از سرریز محتوا، ساختار کانتینر یا .container-fluid را نیز با استفاده از کلاس هایی مانند .px-4 تنظیم کرد. این کار از بهم ریختگی طراحی در نمایشگرهای مختلف جلوگیری می کند.

در آموزش پروژه محور بوت استرپ نیز معمولاً از همین کلاس ها برای ساخت رابط های کاربری منظم و واکنش گرا استفاده می شود.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

استفاده از قابلیت Overflow

یکی از روش های کنترل سرریز محتوا در ردیف ها، اضافه کردن یک عنصر پوششی با کلاس .overflow-hidden به اطراف عنصر .row است. این کار به مخفی شدن بخش های اضافه محتوا کمک می کند و از بهم ریختگی در طراحی جلوگیری می کند.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

گاترهای عمودی در بوت استرپ

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

برای کنترل عرض گاترهای عمودی در یک ردیف، می توان از کلاس های .gy-* استفاده کرد. این کلاس ها به ویژه زمانی کاربرد دارند که ستون ها به دلیل محدودیت فضا به خط بعد منتقل می شوند (column wrapping).

همانند گاترهای افقی، استفاده از گاترهای عمودی نیز ممکن است باعث ایجاد سرریز در پایین ردیف شود، به خصوص در انتهای صفحات. برای جلوگیری از این مشکل، می توان یک عنصر پوششی با کلاس .overflow-hidden دور عنصر .row قرار داد تا بخش های اضافه به درستی مدیریت شوند.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

گاترهای افقی و عمودی در بوت استرپ

برای کنترل همزمان گاترهای افقی و عمودی در گرید بوت استرپ، از کلاس های .g-* استفاده کنید. این کلاس ها به شما امکان می دهند با یک دستور، فاصله بین ستون ها را در هر دو جهت مدیریت کنید.

استفاده از گاترهایی با عرض کمتر باعث می شود نیازی به استفاده از کلاس .overflow-hidden برای جلوگیری از سرریز محتوا وجود نداشته باشد. این روش، طراحی را ساده تر و تمیزتر نگه می دارد.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

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

در طراحی واکنش گرا، می توان کلاس های گاتر را به ستون های ردیفی اضافه کرد. با ترکیب کلاس های ستون ردیفی و گاترهای واکنش گرا، می توان فاصله بین ستون ها را در اندازه های مختلف صفحه به‌درستی تنظیم کرد.

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

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

حذف گاترها در بوت استرپ

برای حذف کامل فاصله بین ستون ها در سیستم گرید، می توانید از کلاس .g-0 استفاده کنید. این کلاس باعث می شود حاشیه های منفی از .row و فاصله داخلی افقی از ستون های داخل آن حذف شود.

اگر قصد دارید یک طراحی تمام عرض (edge-to-edge) داشته باشید، می توانید عنصر والد .container یا .container-fluid را حذف کرده و کلاس .mx-0 را به .row اضافه کنید تا از سرریز محتوا جلوگیری شود.

کلاس .g-0 هم حاشیه ها و هم فاصله های داخلی را از ردیف و ستون ها حذف می کند و باعث ایجاد ساختاری کاملاً فشرده و بدون فاصله می شود.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

5/5 - (1 امتیاز)

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

پکیج آموزش سی شارپ | مختص ورود به بازار کار + آموزش ساخت بازی Quiz of King
  • انتشار: ۲۷ اردیبهشت ۱۴۰۴

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید