گزینه های شبکه
ببینید چگونه جنبه های شبکه بوت استرپ
| xs \u003c576 پیکسل |
اس ام ≥576 پیکسل |
md ≥768 پیکسل |
ال جی ≥992 پیکسل |
xl ≥1200 پیکسل |
xxl ≥1400 پیکسل |
|
|---|---|---|---|---|---|---|
| رفتار شبکه | افقی در همه حال | برای شروع جمع شد، افقی بالای نقاط شکست | ||||
| حداکثر عرض ظرف | هیچکدام (خودکار) | 540 پیکسل | 720 پیکسل | 960 پیکسل | 1140 پیکسل | 1320 پیکسل |
| پیشوند کلاس | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| # ستون | 12 | |||||
| عرض ناودان | 24 پیکسل (12 پیکسل در هر طرف یک ستون) | |||||
| ناودان های سفارشی | آره | |||||
| تودرتو | آره | |||||
| افست | آره | |||||
| ترتیب ستون | آره | |||||
مثال شبکه
برای تراز عمودی و افقی ستون ها از ابزارهای تراز flexbox استفاده کنید
col-lg-12
col-lg-11
col-lg-1
col-lg-10
col-lg-2
col-lg-9
col-lg-3
col-lg-8
col-lg-4
col-lg-7
col-lg-5
col-lg-6
col-lg-6
col-lg-5
col-lg-7
col-lg-4
col-lg-8
col-lg-3
col-lg-9
col-lg-2
col-lg-10
col-lg-1
col-lg-11
col-lg-2
col-lg-3
col-lg-4
col-lg-2
col-lg-1
هم ترازی
برای تراز عمودی و افقی ستون ها از ابزارهای تراز flexbox استفاده کنید
تراز عمودی (align-item-start)
col-sm-4
col-sm-4
col-sm-4
تراز کردن آیتم ها در مرکز
col-sm-4
col-sm-4
col-sm-4
تراز کردن موارد پایان
col-sm-4
col-sm-4
col-sm-4
خود را تراز کنید
align-self-start
align-self-center
align-self-end
تراز افقی
justify-content-start
justify-content-center
justify-content-end
پشته ها
کمک‌کننده‌های کوتاه‌نویسی که بر روی ابزارهای flexbox ما ساخته می‌شوند تا طرح‌بندی اجزا را سریع‌تر و آسان‌تر از همیشه کنند.
پشته های عمودی (.vstack)
مورد اول
مورد دوم
مورد سوم
پشته های افقی (.hstack)
مورد اول
مورد دوم
مورد سوم
پشته های افقی (.hstack) with Vertical Rule (.vr)
مورد اول
مورد دوم
مورد سوم