سیستم شبکه بندی Bootstrap به ما اجازه می دهد تا حداکثر از 12 ستون در صفحه استفاده کنیم.
در صورتی که نمی خواهید از تمام 12 ستون به طور جداگانه استفاده کنید، می توانید ستون ها با یکدیگر ادغام کنید تا ستون های عریض تری ایجاد کنید.
سیستم شبکه بندی Bootstrap، واکنش گرا(responsive) می باشد , و ستون ها به طور اتوماتیک بر اساس اندازه صفحه ی نمایش، تنظیم خواهند شد. در یک صفحه نمایش بزرگ ، اگر محتوی در سه ستون چیده شود بهتر به نظر می رسد. اما در یک صفحه نمایش کوچک بهتر است که مطالب زیر هم قرار بگیرند.
نکته: به خاطر داشته باشید که ستون های شبکه بندی در یک ردیف باید دارای حداکثر 12 ستون باشند. در صورت بیشتر بودن، ستون ها بدون توجه به منطقه ی دید(viewport) دسته بندی خواهند شد.
کلاس های شبکه بندی
سیستم شبکه بندی Bootstrap دارای 4 کلاس می باشد:
-
xs(برای موبایل ها)
-
sm( برای تبلت ها)
-
md(برای کامپیوترهای رومیزی)
-
lg(برای کامپیوترهای بزرگتر)
کلاس های بالا می توانند با یکدیگر ترکیب شوند تا بتوان طرح بندی های(layout) داینامیک و قابل انعطاف را ایجاد کرد.
نکته: مقیاس هر کلاس زیاد می شود، بنابراین اگر می خواهید یک عرض یکسان را برای xs و sm ایجاد کنید، تنها لازم است که آن را برای xs اضافه کنید.
قواعد سیستم شبکه بندی Bootstrap
ردیف ها (row) برای هم ترازی (alignment) و padding مناسب باید در داخل یک کلاس container.(عرض ثابت) یا کلاس container-fluid.(عرض کامل) قرار بگیرند.
برای ایجاد گروه های افقی ستون ها از ردیف ها استفاده کنید.
محتوی باید داخل ستون ها قرار بگیرد و فقط ستون ها ممکن است، به عنوان فرزند ردیف ها باشند.
با استفاده از کلاس های از پیش تعریف شده row. و col-sm-4. می توان به سرعت، طرح بندی های (layout) شبکه بندی را ایجاد کرد.
از طریق padding بین محتوای ستون ها فاصله ایجاد می شود. این padding ها در ردیف ها برای اولین و آخرین ستون از طریق margin منفی بر روی rows. خنثی می شوند.
ستون های شبکه بندی با مشخص کردن 12 ستون قابل گسترش ایجاد شده اند. بعنوان مثال برای ایجاد سه ستون مساوی می توانید از سه کلاس col-sm-4. استفاده کنید.
ساختار پایه شبکه بندی Bootstrap
در زیر یک ساختار پایه شبکه بندی Bootstrap را مشاهده می کنید:
<div class="container">
<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>
</div>
برای ایجاد Layout مورد نظرتان ، یک container (<"div class="container>) ایجاد کنید. سپس یک ردیف
(<"div class="row>) ایجاد کرده و به تعداد دلخواه ستون اضافه کنید. (تگ هایی با کلاس های *-*- .col)
توجه داشته باشید که جمع مقادیر *-*- .col در هر ردیف باید حداکثر 12 باشد.
گزینه های شبکه بندی
جدول زیر به طور خلاصه نشان می دهد که چطور سیستم شبکه بندی Bootstrap برای وسایل مختلف کار می کند:
|
|
وسایل بسیار کوچک
موبایل ها
(<768px)
|
وسایل کوچک
تبلت ها
(>=768px)
|
وسایل متوسط
کامپیوترهای رومیزی
(>=992px)
|
وسایل بزرگ
کامپیوترهای رومیزی
(>=1200px)
|
|
رفتار شبکه بندی |
همواره افقی می باشد |
در صورت بزرگ بودن صفحه نمایش ستون ها افقی اند و
در غیر این صورت ستون ها عمودی خواهند بود
|
در صورت بزرگ بودن صفحه ی نمایش ستون ها افقی اند و
در غیر این صورت ستون ها عمودی خواهند بود
|
در صورت بزرگ بودن صفحه ی نمایش ستون ها افقی اند و
در غیر این صورت ستون ها عمودی خواهند بود
|
|
Container عرض
|
None (auto) |
750px |
970px |
1170px |
|
پیشوند کلاس |
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
|
تعداد ستون ها |
12 |
12 |
12 |
12 |
|
عرض ستون |
Auto |
~62px |
~81px |
~97px |
|
عرض شکاف |
30px (15px on each side of a column) |
30px (15px on each side of a column) |
30px (15px on each side of a column) |
30px (15px on each side of a column) |
|
Nestable |
Yes |
Yes |
Yes |
Yes |
|
Offsets |
Yes |
Yes |
Yes |
Yes |
|
مرتب شدن ستون ها |
Yes |
Yes |
Yes |
Yes |