دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۲
  • مرداد

جلسه ۳۷ : طراحی grid برای دستگاه های بزرگ در bootstrap 3

  • دسته‌بندی‌ها :
جلسه ۳۷ : طراحی grid برای دستگاه های بزرگ در bootstrap 3
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. سیستم شبکه بندی medium برای دستگاه های متوسط مانند لب تاپ و برخی نمایشگرهای سیستم های pc طراحی شده است و برای تقسیم بندی های ۵۰%/۵۰% در عناصر قالب وب سایت بسیار مناسب است. در این آموزش نیز قصد داریم به مباحث طراحی grid برای دستگاه های بزرگ در bootstrap 3 یا سیستم شبکه بندی large بپردازیم.

      طراحی grid برای دستگاه های بزرگ در bootstrap 3

      شبکه بندی Large در Bootstrap 4

      شبکه بندی Large در bootstrap 4

      در بخش های قبلی گفتیم که تقسیم بندی مناسب سیستم شبکه بندی small تقسیم بندی ۲۵%/۷۵% است و برای سیستم شبکه بندی medium نیز تقسیم بندی ۵۰%/۵۰% را به عنوان تقسیم بندی مناسب این سیستم، معرفی کردیم:

      مثال : 

      اما برای صفحه نمایش های Large ، بهتر است که از تقسیم بندی ۳۳%/۶۶% استفاده کنید.

      نکته: دستگاههایی با عرض صفحه نمایش بزرگتر از ۱۲۰۰ pixels را دستگاههای Large می نامند.

      برای سیستم شبکه بندی Large در bootstrap از کلاسهای سری  .col-lg-* استفاده می کنند:

      مثال : 

      در مثال فوق، سیستم grid برای دستگاه های کوچک از کلاس های -sm- و برای دستگاه های بزرگ نیز از کلاس های -lg- استفاده می کند.

      مثال:

      در کد زیر ما از تقسیم بندی ۲۵%/۷۵% برای دستگاه های کوچک ، تقسیم بندی ۵۰%/۵۰% برای دستگاه های متوسط و از تقسیم بندی ۳۳%/۶۶% نیز برای دستگاه های بزرگ استفاده کرده ایم:

      مثال : 

      نکته: توجه داشته باشید که مجموع اعداد کلاسهای col در هر سطری نباید از ۱۲ بیشتر شود.

      استفاده ی تکی از شبکه بندی متوسط (large )

      در مثال زیر ما فقط از کلاس های .col-lg-6 در سیستم grid استفاده می کنیم.

      این به این معنی است که برای دستگاههای بزرگ از تقسیم بندی ۵۰%/۵۰%، استفاده می کند:

      مثال : 

      کلام آخر

      طراحی grid برای دستگاه های بزرگ در bootstrap 3 برای تقسیم بندی های ۳۳%/۶۶% مناسب است، همچنین این طراحی برای تنظیم قالب وب سایت در نمایشگرهای بزرگ مانند صفحه نمایش های lcd کامپیوتر pc طراحی شده است.

      در این بخش بررسی کلاسهای grid به پایان رسید در بخش بعدی به بررسی مثال هایی از grid می پردازیم.

       

       

      QR:  جلسه ۳۷ : طراحی grid برای دستگاه های بزرگ در bootstrap 3
      به اشتراک بگذارید