گرید
گزینه های گرید
ببینید چگونه جنبه های گرید بوت سترپ سیستم در چندین دستگاه با یک جدول مفید کار می کند.
| بسیار کوچک <576px | کم اهمیت ≥576px | متوسط ≥768px | بزرگ ≥992px | فوق العاده بزرگ ≥1200px | |
|---|---|---|---|---|---|
| رفتار گرید | افقی در همه زمان ها | برای شروع ، افقی بالاتر از نقاط شکست | |||
| عرض کانتینر حداکثر | خودکار | 540px | 720px | 960px | 1140px |
| پیشوند کلاس | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| #ستون | 12 | ||||
| عرض شکاف | 20px (10px در هر طرف یک ستون) | ||||
| تو در تو | بله | ||||
| آفست | بله | ||||
| ترتیب | بله | ||||
نمونه گرید
ستون ها در 576px
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
نمونه گرید
ستون ها در 768px
.col-md-3
.col-md-6
.col-md-3
نمونه گرید
ستون ها در 992px
.col-lg-6
.col-lg-6
نمونه گرید
ستون ها در 1200px
.col-xl-4
.col-xl-4
.col-xl-4
نمونه گرید
با استفاده از یک مجموعه واحد.col-sm-*کلاس ها ، شما می توانید یک سیستم شبکه اصلی ایجاد کنید که قبل از اینکه در دستگاه های دسک تاپ (متوسط) تبدیل شود ، روی دستگاه های کوچک اضافی جمع می شود.
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-6
.col-sm-6
.col-sm-12
آفست (ماکزیمم خودکار)
با استفاده از حرکت دادن ستون ها به سمت راست با کلاس .offset-md-* این کلاس ها حاشیه سمت چپ یک ستون توسط * ستون ها را افزایش می دهد. مثلا، .offset-md-4 حرکت می کند .col-md-4 بیش از چهار ستون. با حرکت به فلکس باکس در ورژن 4 ، می توانید از خدمات حاشیه ای مانند استفاده کنید .mr-auto برای مجبور کردن ستون های خواهر و برادر به دور از یکدیگر.
.col-sm-8 offset-sm-2
.col-sm-3 ml-auto
.col-sm-3 ml-auto
.col-sm-3
.col-sm-3 offset-sm-3