سیستم شبکه بندی

هر روز از کار کردن الهام می گیرد.

چگونه کار می کند

بوت استرپ به لطف سیستم دوازده ستونی، پنج لایه پیش‌فرض پاسخگو، متغیرها و میکس‌های Sass، و ده‌ها کلاس از پیش تعریف‌شده، یک شبکه قدرتمند فلکس‌باکس موبایل اول برای ساخت طرح‌بندی‌ها در هر شکل و اندازه دارد.

گزینه های شبکه بندی

در حالی که بوت استرپ استفاده می کند ems یا rems برای تعریف اکثر اندازه ها، pxs برای نقاط شکست شبکه و عرض کانتینر استفاده می شود. این به این دلیل است که عرض درگاه نمایش بر حسب پیکسل است و با تغییر آن تغییر نمی کند اندازه فونت.

ببینید که چگونه جنبه های سیستم شبکه بندی بوت استرپ در چندین دستگاه با یک جدول مفید کار می کند.

بسیار کوچک
<576px 		کوچک
≥576px 		متوسط
≥768px 		بزرگ
≥992px 		بسیار بزرگ
≥1200px
حداکثر عرض ظرف هیچکدام (خودکار) 540px 720px 960px 1140px
پیشوند کلاس .col- .col-sm- .col-md- .col-lg- .col-xl-
# از ستون 12
عرض ناودان (Gutter width) 30px (15 پیکسل در هر طرف یک ستون)
تودرتو بله
ترتیب ستون بله

مثال: سیستم شبکه پیش‌ فرض دسکتاپ

.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-3
.col-lg-3
.col-lg-3
.col-lg-3
.col-lg-4
.col-lg-4
.col-lg-4
.col-lg-6
.col-lg-6
.col-lg-8
.col-lg-4
.col-lg-9
.col-lg-3
.col-lg-10
.col-lg-2
.col-lg-11
.col-lg-1
.col-lg-12
.col-lg-12
.col-lg-8
.col-lg-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-lg-6
.col-lg-6
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-3
.col-lg-9

مثال: موبایل و دسکتاپ

.col-12 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-lg-4
.col-6 .col-lg-4
.col-6 .col-lg-4
.col-6
.col-6

مثال: موبایل، تبلت، دسکتاپ

.col-12 .col-md-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4