صفحه اصلی / دوره‌های آموزشی / آموزش بوت استرپ 4 از مقدماتی تا پیشرفته / آموزش جامع گرید سیستم (Grid System) در بوت استرپ 4

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

آموزش جامع گرید سیستم (Grid System) در بوت استرپ 4
براي خريد اين درس نياز است وارد سايت شويد. در صورت نداشتن حساب کاربري عضو شويد.
81,000 تومان

جلسات دوره


                       
مهدی عباسی
مدرس:

مهدی عباسی

18 سال سابقه برنامه‌نویسی و تدریس برنامه‌نویسی
کسب مقام‌های اول و دوم کشوری در مسابقات برنامه‌نویسی

مهدی عباسی هستم، مسلط به حداقل ۲۰ زبان مطرح برنامه نویسی به صورت پیشرفته، مدیر عامل شرکت آریا نرم افزار و بنیانگذار آکادمی درسمن، مسلط به تدریس دروس تخصصی کاردانی و کارشناسی کامپیوتر، پایگاه داده ها، برنامه نویسی پیشرفته، مبانی برنامه نویسی، مباحث ویژه طراحی وب و .... مشاهده رزومه

گرید سیستم (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 پیکسل)

 

phone size

 

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

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

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

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


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


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

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

 

نظرات دانشجویان

نظر شما در تصمیم دیگران اثرگذار است.

لطفا برای همراهان درسمن و بهتر شدن دوره نظر خود را بنویسید.

برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.
ثبت نام

275