Container در بوت استرپ 4

container ها پایه ای ترین عنصر لایه بندی در بوت استرپ می باشند. آموزش لایه بندی در بوت استرپ 4 با مفهوم container ها آغاز می شود.

Container در بوت استرپ 4
Article مجازی

container ها پایه ای ترین عنصر لایه بندی در بوت استرپ می باشند. آموزش لایه بندی بوت استرپ 4 با مفهوم container ها آغاز می شود.

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

Container ها دو دسته هستند:

  • کلاس container که دارای یک عرض ثابت در هر صفحه نمایش است.
  • کلاس container-fluid که در همه صفحات نمایش دارای عرض width=100% می باشد.

در بروز رسانی اخیر بوت استرپ 4 یعنی نسخه 4.4، container های واکنش گرا نیز به صورت زیر اضافه شده اند:

container-{breakpoint}. که در اندازه های کمتر از نقطه شکست دارای اندازه 100% هستند و در بالاتر از آن به ازای هر نقطه شکست دارای اندازه ثابتی هستند.

 

Extra Small

576px˂

Small

576px≤

Medium

768px≤

Large

992px≤

Extra Large

1200px≤

container. 100% 540px 720px 960px 1140px
container-sm. 100% 540px 720px 960px 1140px
container-md. 100% 100% 720px 960px 1140px
container-lg. 100% 100% 100% 960px 1140px
container-xl. 100% 100% 100% 100% 1140px
container-fluid. 100% 100% 100% 100% 100%

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

برای حالت container-{breakpoint} مثالی از container-md را بررسی می کنیم. md یعنی medium device ها یا تپلت ها. یعنی صفحات نمایشی که حداقل 768px و حداکثر 991px اندازه عرض صفحه نمایش آنها است. حال اگر از container-md استفاده کنیم در صفحات نمایش کوچکتر (sm) و صفحات نمایش خیلی کوچک (xs) اندازه width آن برابر 100% خواهد بود. در صفحات نمایش متوسط یا تپلت ها 720px، در صفحات نمایش بزرگ یا مانیتورها 960px و در صفحات نمایش خیلی بزرگ 1140px می باشد.

همانطور که در تصویر فوق مشاهده می کنید container-md در سطر دوم نمایش داده شده است. در صفحه موبایل 100% صفحه را در برگرفته ولی در تبلت ها (md) و مانیتور (lg) چون طول ثابتی دارد از اطراف دارای حاشیه می باشد.

Container-fluid در تمامی صفحات نمایش 100 درصد عرض صفحه را می پوشاند.

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

 

محتوا
  • - Container در بوت استرپ 4

  • Container در بوت استرپ 4

توسعه وب / Bootstrap