سرفصل دوره

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

81,000 تومان
  • .دسترسی مادام العمر به ویدئوهای دوره
  • .دسترسی رایگان به آپدیت های دوره
  • .تدریس روان و ساده با کیفیت بالا
  • .سرفصل های بسیار جامع و غنی
1203فارغ التحصیل
avatar

مهدی عباسی

مهندس ارشد کارشناسی کامپیوتر
5

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

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

هنوز اینجا کامنتی ثبت نشده

آموزش جامع گرید سیستم (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 پیکسل)

 

phone size

 

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

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

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

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


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


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

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