آپشن های گرید
در حالی که از بوت استرپ بیشتر برای تعیین اندازه ها استفاده میشود برای نقاط شکست گرید و عرض کانتینر نیز استفاده میشود. دلیل هم این است که عرض نمایشگرها بر حسب پیکسل است و با اندازه فونت تغییر نمی کند. حالا در این جدول به طور کامل میبینید که سیستم Bootstrap grid بر روی نمایشگرهای مختلف به چه صورتی کار میکند.
|
خیلی کوچک <576 پیکسل |
کوچک ≥576 پیکسل |
متوسط ≥768 پیکسل |
بزرگ ≥992 پیکسل |
خیلی بزرگ ≥1200 پیکسل |
خیلی خیلی بزرگ ≥1400 پیکسل |
|
|---|---|---|---|---|---|---|
| حداکثر عرض کانتینر | None (auto) | 540 پیکسل | 720 پیکسل | 960 پیکسل | 1140 پیکسل | 1320 پیکسل |
| پیشوند کلاس | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| تعداد ستونها | 12 | |||||
| عرض Gutter | 24 پیکسل (12 پیکسل در هر طرف یک ستون) | |||||
| کامپوننت Nestable | بله | |||||
| ستون سفارشی | بله | |||||
مثال : انباشته به افقی
با استفاده از یک مجموعه واحد از کلاس‌های گرید .col-md-* ، می‌توانید یک سیستم گرید پیش‌فرض ایجاد کنید که قبل از افقی شدن در دستگاه‌های تلفن همراه و دستگاه‌های تبلت (از محدوده بسیار کوچک تا کوچک) شروع به کار میکند . در دستگاه های رومیزی (متوسط). ستون های گرید را در هر .row اضافه کنید.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row show-grid">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row show-grid">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
مثال : موبایل و دسکتاپ
نمی خواهید ستون های شما به سادگی در دستگاه های کوچکتر جمع شوند؟ با افزودن .col-xs-* .col-md-* به ستون‌های خود، از کلاس‌های گرید دستگاه‌های کوچک و متوسط اضافی استفاده کنید. مثال زیر را ببینید تا ایده بهتری در مورد نحوه کارکرد آن داشته باشید.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<div class="row show-grid">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
مثال : موبایل ، تبلت و دسکتاپ
با ایجاد طرح‌بندی‌های پویاتر و قدرتمندتر با کلاس‌های .col-sm-* تبلت، از مثال قبلی استفاده کنید.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row bg-light m-b-10 p-10">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
بازنشانی ستون ریسپانسیو
با چهار سطح گرید های موجود، احتمالاً با مشکلاتی روبرو خواهید شد که در نقاط شکست خاص، ستون های شما کاملاً درست پاک نمی شوند زیرا یکی از آنها بلندتر از دیگری است. برای رفع آن، از ترکیبی از .clearfix و کلاس‌های ابزار ریسپانسیو ما استفاده کنید.
.col-xs-6 .col-sm-3
اندازه نمای خود را تغییر دهید یا به عنوان مثال آن را در تلفن خود بررسی کنید
اندازه نمای خود را تغییر دهید یا به عنوان مثال آن را در تلفن خود بررسی کنید
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row bg-light m-b-10 p-10">
<div class="col-xs-6 col-sm-3"> .col-xs-6 .col-sm-3
<br> Resize your viewport or check it out on your phone for an example. </div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
تنظیم ستون ها
ستون ها را با استفاده از کلاس های .offset-md--* به سمت راست منتقل کنید. این کلاس ها حاشیه سمت چپ یک ستون را با ستون های * افزایش می دهند. برای مثال، .offset-md-4 .col-md-4
را روی چهار ستون منتقل می کند .
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row bg-light m-b-10 p-10">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row bg-light m-b-10 p-10">
<div class="col-md-3 offset-md-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row bg-light m-b-10 p-10">
<div class="col-md-6 offset-md-3">.col-md-6 .col-md-offset-3</div>
</div>
