آموزش جامع گرید سیستم (Grid System) در بوت استرپ 4

گرید سیستم (Grid System) در بوت استرپ 4  چیست؟

اصلی ترین و مهم‌‌ ترین مبحث بوت استرپ 4، مبحث Grid System می‌باشد. که به کمک Grid System می‌توان به راحتی محتوای وب سایت خود را در دستگاه‌های مختلف به طور مناسب نشان داد. در این بخش از آموزش، با مباحث و کلاس های زیر آشنا می‌شوید.

آشنایی با مبحث بسیار کاربردیBreakpoints:
برای اینکه طرح‌های مختلفی در صفحه‌های مختلف داشته باشیم، نیازی به نوشتن media query نداریم، و می‌توانیم از Breakpointها استفاده کنیم.
بوت استرپ 4 درای پنج Breakpoint است که می توانیم استفاده کنیم:

• .col- (دستگاه های خیلی کوچک، عرض صفحه نمایش کمتر از 576 پیکسل )
• .col-sm-(دستگاه های کوچک، عرض صفحه نمایش بین 576 پیکسل تا 768 پیکسل)
• .col-md-(دستگاه های متوسط، عرض صفحه نمایش بین 768 پیکسل تا 992 پیکسل)
• .col-lg-(دستگاه های بزرگ، عرض صفحه نمایش بین 992 پیکسل تا 1200 پیکسل)
• .col-xl-(دستگاه های خیلی بزرگ، عرض صفحه نمایش بیشتر از 1200 پیکسل)

آشنایی با کلاس های container ،container-fluid ،row و col

در بحث گرید سیستم ها چندین کلاس خیلی مهم داریم:

• کلاس container: کلاسی است که باعث می شود یک المان از دو طرف صفحه فاصله داشته باشد.
• container-fluid: المان را در عرض تمام صفحه قرار میدهد.
• کلاس row: برای ایجاد یک سطر استفاده می شود.
• کلاس col: برای ایجاد یک ستون استفاده می شود.

نکته: گرید سیستم بوت استرپ بر پایه 12 ستون است.

برای یادگیری این مبحث مثال ها و نکته های متعددی را در فایل ویدئویی آورده ایم که با تهیه این درس و مشاهده ویدئو ها به طور کامل به این مبحث مسلط خواهید شد.

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

انجمن برنامه نویسان وب