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


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

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

 


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


مشخصات دوره


مدرس دوره : مهدی عباسی
تعداد جلسات 24 جلسه
مدت زمان 661 دقیقه
حجم دوره 2/76 گیگابایت
سطح مهارت مقدماتی تا پیشرفته
وضعیت دوره پایان یافته
تعداد دانشجویان 374
: میانگین امتیاز

175,000تومان
برای دسترسی به این دوره وارد یا عضو شوید.
مهدی عباسی

مهدی عباسی


درباره مدرس :

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