شبکه
گزینه های شبکه
ببینید که چگونه جنبه های سیستم شبکه bootstrap در سراسر کار می کنند صفحه رسمی وب سایت
|
xs
<576px |
sm
≥576px |
md
≥768px |
lg
≥992px |
xl
≥1200px |
xxl
≥1400px |
|
|---|---|---|---|---|---|---|
| کانتینر مکس عرض | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| پیشوند کلاس |
.col-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
.col-xl-
|
.col-xxl-
|
| # ستون | 12 | |||||
| عرض حصیر | 1.5rem (.75rem on left and right) | |||||
| روده های سفارشی | Yes | |||||
| لانه پذیر | Yes | |||||
| ترتیب | Yes | |||||
در عرض برابر
به عنوان مثال ، در اینجا دو طرح شبکه وجود دارد که برای هاردیبهشت اعمال می شود
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
تنظیم عرض یک ستون
لایه خودکار برای ستون های شبکه Flexbox نیز به این معنی است که می توانید
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
محتوای عرض متغیر
از کلاسهای col- {breakpoint} -auto به ستون های اندازه بر اساس استفاده کنید
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
هاردیبهشت نقاط شکست
برای شبکه هایی که از کوچکترین دستگاه ها یکسان هستند
col
col
col
col
col-8
col-4
انباشته شده به افقی
با استفاده از یک مجموعه از کلاسهای .Col-SM-* ، می توانید یک ایجاد کنید
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
مخلوط و مطابقت
نمی خواهید ستون های شما به سادگی در برخی از شبکه ها جمع شوند
.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
ستونهای ردیف
برای تنظیم سریع این کلاس از کلاسهای پاسخگو.
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
ستون
لانه سازی
برای لانه سازی محتوای خود با شبکه پیش فرض ، یک .row جدید اضافه کنید
Level 1: .col-sm-3
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
ستون - تراز عمودی
از برنااردیبهشت های تراز Flexbox برای عمودی و
یک ستون از سه ستون
یک ستون از سه ستون
یک ستون از سه ستون
یک ستون از سه ستون
یک ستون از سه ستون
یک ستون از سه ستون
یک ستون از سه ستون
یک ستون از سه ستون
یک ستون از سه ستون
یک ستون از سه ستون
یک ستون از سه ستون
یک ستون از سه ستون
تراز افقی
دو ستون از یک سطر
دو ستون از یک سطر
دو ستون از یک سطر
دو ستون از یک سطر
دو ستون از یک سطر
دو ستون از یک سطر
دو ستون از یک سطر
دو ستون از یک سطر
دو ستون از یک سطر
دو ستون از یک سطر
دو ستون از یک سطر
دو ستون از یک سطر
بسته بندی ستون
Since 9 + 4 = 13 > 12, this 4-ستون-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent ستونs continue along the new line.
.col-9
.col-4
Since 9 + 4 = 13 > 12, this
4-ستون-wide div gets wrapped onto a new line as one
contiguous unit.
.col-6
Subsequent ستونs continue along the new
line.
شکست ستون
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
دوباره - کلاس های سفارش
برای کنترل ترتیب بصری از کلاسهای.
First in DOM, no order applied
Second in DOM, with a larger order
Third in DOM, with an order of 1
First in DOM, no order applied
Second in DOM, with a larger order
Third in DOM, with an order of 1
کلاس های ستون افست
ستون ها را با استفاده از کلاسهای .offset-md-* به سمت راست حرکت دهید.
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
کلاس های ستون مستقل
کلاسهای .col-* همچنین می توانند در خارج از یک .row برای دادن استفاده شوند
.col-3: width of 25%
.col-sm-9: width of 75% above sm breakpoint
روده ها - افقی
.GX-* کلاس ها را می توان برای کنترل روده افقی استفاده کرد
پر کردن ستون سفارشی
پر کردن ستون سفارشی
روده ها - عمودی
از کلاسهای اردیبهشت‌م* می توان برای کنترل روده عمودی استفاده کرد
پر کردن ستون سفارشی
پر کردن ستون سفارشی
پر کردن ستون سفارشی
پر کردن ستون سفارشی
روده ها - عمودی و افقی
از کلاسهای .g-* می توان برای کنترل روده افقی استفاده کرد
پر کردن ستون سفارشی
پر کردن ستون سفارشی
پر کردن ستون سفارشی
پر کردن ستون سفارشی
روده ستون های ردیف
کلاسهای گاتر همچنین می توانند به ستون های ردیف اضافه شوند.
سطر و ستون
سطر و ستون
سطر و ستون
سطر و ستون
سطر و ستون
سطر و ستون
سطر و ستون
سطر و ستون
سطر و ستون
سطر و ستون
بدون ناودان
روده بین ستون ها در کلاسهای شبکه از پیش تعریف شده ما
.col-sm-6 .col-md-8
.col-6 .col-md-4