گزینه های سیستم شبکه بندی
|
خیلی کوچک <576px |
کوچک ≥576px |
متوسط ≥768px |
بزرگ ≥992px |
خیلی بزرگ ≥1200px |
|
|---|---|---|---|---|---|
| حداکثر عرض ظرف | تعریف نشده (اتوماتیک) | 540px | 720px | 960px | 1140px |
| پیشوند کلاس | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # تعداد کل ستون ها | 12 | ||||
| عرض شیار | 30px (15px از هر طرف یک ستون) | ||||
| خاصیت تو در تو بودن | بله | ||||
| ترتیب ستون | بله | ||||
مثال : انباشته به افقی
.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-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-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>
بازنشانی ستون ریسپانسیو
.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> اندازه صفحه نمایشگر خود را تغییر دهید یا برای مثال آن را در تلفن خود بررسی کنید. </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>
ستون های جبران کننده
.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>