آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش سیستم شبکه بندی بوت استرپ-Bootstrap Grid System

دوره های مرتبط با این مقاله

سیستمِ BootStrap Grid (شبکه بندی بوتسترپ)

سیستم Grid (شبکه بندی) موجب می شود که عرضِ صفحه به میزانِ حداکثر 12 ستون افزایش یابد. اگر خواستارِ استفاده از تمامیِ این 12 ستون نمی باشید، می توانید ستون ها را با هم ترکیب کرده و ستون های گسترده تری را به دست آورید:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

سیستمِ BootStrap Grid به صورت Responsive یا واکنش گرا بوده و در آن ستون ها به صورت خودکار و بسته به سایزِ صفحه نمایشگر، تغییر اندازه خواهند داد. محتوای سازماندهی شده بر روی نمایشگرهای بزرگ، بسیار بهتر دیده می شود. اما در صفحات کوچکتر بسیار مطلوب تر خواهد بود اگر محتوا را به صورت دسته بندی شده (Stacked) و به صورت ستونی از بالا به پایین ارائه داد.

نکته:

به یاد داشته باشید که ستون های Grid دارای حداکثر 12 ستون به ازای هر ردیف می باشند. اگر تعداد آن ها بیشتر از 12 باشد، ستون ها بدون در نظر گرفتن viewport دسته بندی می شوند.

کلاس های Grid

  • xs برای موبایل
  • sm برای تبلت
  • md برای رایانه
  • lg برای رایانه های بزرگتر

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

نکته:

امکان افزایش مقیاس برای هر کدام از کلاس ها وجود دارد. بنابراین، اگر بخواهید پهنای یکسانی برای xs و sm در نظر بگیرید، تنها کافی است که مقیاس xs را تعیین نمایید.

قواعد سیستم Grid

برخی از قواعد و اصول سیستم Grid (شبکه بندی) در BootStrap به شرح زیر می باشند:

  • به منظور تنظیم صحیح چیدمان و padding، ردیف ها باید درون یک کلاس .container (عرض ثابت) و یا داخل کلاس .container-fluid (عرض کامل) قرار گیرند.
  • برای ایجاد گروه های افقی ستون ها می توان از سطر ها استفاده کرد.
  • محتوا باید داخل ستون ها قرار گیرد، و تنها ستون ها می توانند فرزندان بی واسطه ی ردیف ها باشند.
  • کلاس های از قبل تعریف شده از قبیل .row و .col-sm-4 برای ایجاد سریع طرح های (layout) Grid در دسترس می باشند.
  • ستون ها از طریق padding، فاصله هایی (gutters) را بین محتوای ستون ایجاد می کنند. این padding، به واسطه ی حاشیه ی negative بر روی کلاس .rows، برای اولین و آخرین ستون offset می شود.
  • ستون های Grid (شبکه بندی) با تعیین تعداد ستون های مورد نظر کاربر از بین 12 ستونِ موجود، ایجاد می شوند. برای مثال، در طراحی سه ستون برابر (three equal columns)، باید از سه کلاس .col-sm-4 استفاده نمود.

ساختار اصلی BootStrap Grid

کد پایین ساختار اولیه و پایه ی سیستم BootStrap Grid را نشان می دهد:

                    
...

بنابراین، برای ایجاد layout مورد نظر باید یک container را ایجاد نمود (<div class="container">). در مرحله ی بعدی، یک ردیف باید ساخته شود (<div class="row">). سپس، تعداد ستون های مورد نظر افزوده می شود (از طریق tagهایی که دارای مقادیر مناسبی از کلاس های .col-*-* می باشند). توجه داشته باشید که مجموع مقادیر مربوط به کلاس .col-*-* حداکثر باید 12 ستون برای هر ردیف باشد.

گزینه ها و قابلیت های Grid

جدول زیر چگونگی عملکرد سیستم Grid (شبکه بندی) در BootStrap بر روی وسایل مختلف را به طور خلاصه نشان می دهد:

وسایل بزرگ رایانه های رومیزی (>=1200px)
وسایل متوسط رایانه های رومیزی (>=992px)
وسایل کوچک تبلت ها (>=768px)
وسایل بسیار کوچک گوشی های موبایل (<768px)
در ابتدا به صورت Collapsed، در بالای نقاط انفصال (breakpoints) به صورت افقی
در ابتدا به صورت Collapsed، در بالای نقاط انفصال (breakpoints) به صورت افقی
در ابتدا به صورت Collapsed، در بالای نقاط انفصال (breakpoints) به صورت افقی
همواره به صورت افقی(Horizontal) می باشد
رفتار Grid
1170px
970px
750px
هیچکدام (auto)
پهنای Container
.col-lg-
.col-md-
.col-sm-
.col-xs-
پیشوند کلاس
12
12
12
12
تعداد ستون ها
~97px
~81px
~62px
Auto
پهنای ستون ها
30px (15px در هر طرف از ستون)
30px (15px در هر طرف از ستون)
30px (15px در هر طرف از ستون)
30px (15px در هر طرف از ستون)
پهنای Gutter (فواصل خالی بین ستون های مجاور)
Yes
Yes
Yes
Yes
خاصیت تو در تو بودن (Nestable)
Yes
Yes
Yes
Yes
Offset ها
Yes
Yes
Yes
Yes
ترتیب ستون ها

مثال ها

در فصل های بعدی، مثال هایی از سیستم Grid (شبکه بندی) برای دستگاه های مختلف ارائه شده است:

  • دسته بندی افقی
  • دستگاه های کوچک
  • دستگاه های متوسط
  • دستگاه های بزرگ
  • 2812
  •    838
  • تاریخ ارسال :   1395/10/16

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .