سیستمِ BootStrap Grid (شبکه بندی بوتسترپ)
سیستمِ 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 را نشان می دهد:
|
1
2
3
4
5
6
7
8
9
10
11
|
<div class="row"><div class="col-*-*"></div> </div><div class="row"><div class="col-*-*"></div><div class="col-*-*"></div><div class="col-*-*"></div> </div><div class="row"> ... </div> |
بنابراین، برای ایجاد layout مورد نظر باید یک container را ایجاد نمود (<div class="container">). در مرحله ی بعدی، یک ردیف باید ساخته شود (<div class="row">). سپس، تعداد ستون های مورد نظر افزوده می شود (از طریق tagهایی که دارای مقادیر مناسبی از کلاس های .col-*-* می باشند). توجه داشته باشید که مجموع مقادیر مربوط به کلاس .col-*-* حداکثر باید 12 ستون برای هر ردیف باشد.
گزینه ها و قابلیت های Grid
جدول زیر چگونگی عملکرد سیستم Grid (شبکه بندی) در BootStrap بر روی وسایل مختلف را به طور خلاصه نشان می دهد:
مثال ها
در فصل های بعدی، مثال هایی از سیستم Grid (شبکه بندی) برای دستگاه های مختلف ارائه شده است:
- دسته بندی افقی
- دستگاه های کوچک
- دستگاه های متوسط
- دستگاه های بزرگ
