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



  • ۳۰
  • تیر

جلسه ۰۳ : سیستم شبکه بندی در Bootstrap 4

  • دسته‌بندی‌ها :
جلسه ۰۳ : سیستم شبکه بندی در Bootstrap 4
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش Bootstrap 4 ، را دنبال می کنند. تاکنون در طی این دوره کاربردی ، مباحث مهمی نظیر آشنایی با فریم ورک Bootstrap 4 و همچنین چگونگی تهیه کردن Bootstrap 4 ، را ارائه کردیم. تا الان شما می توانید Bootstrap 4 را از اینترنت دریافت  و طراحی پایه آن را صفحه وب خود قرار دهید. اکنون می خواهیم به سراغ ساختار Bootstrap 4 ، و آشنایی بیشتر با بخش های این فریم ورک محبوب برویم. برای شروع ابتدا ما به موضوع ساختار سیستم شبکه بندی در Bootstrap 4  یا  سیستم grid در Bootstrap 4 ، در این بخش از آموزش ، می پردازیم.

       

      سیستم شبکه بندی در Bootstrap 4

      سیستم شبکه بندی در Bootstrap 4

       

      سیستم شبکه بندی در Bootstrap 4

      سیستم شبکه بندی (Gride) ، در Bootstrap 4 ، از flexbox، ایجاد شده است ، و اجازه می دهد تا ۱۲ ستون را در عرض صفحه وب خود داشته باشید.

      سیستم Grid در Bootstrap 4

      سیستم Grid در Bootstrap 4

      این سیستم شبکه بندی ، responsive است. و ستون های آن بصورت خودکار ، نسبت به اندازه صفحه نمایش ، تنظیم می شوند.

      کلاس های Gride

      سیستم شبکه بندی در Bootstrap 4 ، دارای پنج کلاس است:

      • .col- (برای دستگاه های با صفحه نمایش کوچک – با عرض کمتر از ۵۷۶px)
      • .col-sm- (برای دستگاههای با صفحه نمایش کوچک – با عرض برابر یا بزرگتر از ۵۷۶px)
      • .col-md-(برای دستگاههای با صفحه نمایش متوسط – با عرض برابر یا بزرگتر از ۷۶۸px)
      • .col-lg-  (برای دستگاههایی با صفحه نمایش بزرگ – با عرض برابر یا بزرگتر از ۹۹۲px)
      • .col-xl- (برای دستگاههایی با صفحه نمایش بزرگ – با عرض برابر یا بزرگتر از ۱۲۰۰px)

      کلاس های بالا می توانند برای ایجاد طرح های پویا و انعطاف پذیر تر ترکیب شوند.

      نکته: در حالت ترکیبی ، هر کلاس به کلاس بالاتر ارتقا می یابد، بنابراین اگر می خواهید همان عرض را برای sm و md تنظیم کنید، فقط باید sm را مشخص کنید.

      ساختار پایه ی شبکه بندی Bootstrap 4

      دراینجا ساختار پایه سیستم شبکه بندی در Bootstrap 4 ، را قرار داده ایم:

      مثال : 

      در قسمت اول مثال : ایجاد یک ردیف (<div class = "row">). سپس، تعداد دلخواه ستون را اضافه کنید (برچسب ها با کلاس های مناسب .col-*-*). ستاره اول (*) نشان دهنده پاسخگویی است: sm، md، lg یا xl، در حالی که ستاره دوم نشان دهنده یک عدد است، که باید برای هر ردیف به ۱۲ عدد اضافه کند.

      در قسمت دوم مثال:به جای اضافه کردن یک عدد به هر Col، اجازه دهید. Bootstrap ، متناسب با طرح، ستون هایی با عرض برابر ایجاد کند: دو تا عنصر “col” : با عرض ۵۰% – سه تا “col” :با عرض ۳۳٫۳۳% – چهار تا “col” : ۲۵% و …

      سه ستون برابر

      سه ستون برابر

      سه ستون برابر

      مثال : کد ایجاد سه ستون با عرض های برابر در صفحه نمایش هایی با اندازه های مختلف :
      مثال : 

      ستون های responsive

      ستون های responsive

      ستون های responsive

      مثال زیر چگونگی ایجاد ستون هایی با عرض برابر و متناسب با صفحه نمایش هایی با عرض کمتر از ۵۷۶، را نشان می دهد:
      مثال : 

      دو ستون نابرابر

      دو ستون نابرابر

      دو ستون نابرابر

      مثال : مثال زیر نشان می دهد که چگونه دو ستون عرض مختلف با شروع از دستگاههای تبلت و مقیاس دادن به دسکتاپ های بزرگ اضافی را ایجاد کنید:

      مثال : 

      کلام آخر

      در این بخش از ادامه ی آموزشها ، شروع به آموزش ساختار Bootstrap 4 ، و نحوه ی استفاده از آن در responsive کردن قالب وب سایت، کرده ایم. و در این بخش به بررسی و آموزش سیستم شبکه بندی Bootstrap 4 ، پرداختیم.

      امیدوراریم که مباحث فوق ، مورد استفاده کاربران،  قرار گرفته باشد.

      QR:  جلسه ۰۳ : سیستم شبکه بندی در Bootstrap 4
      به اشتراک بگذارید


      دیدگاه کاربران
      1. تصویر کاربر