سیستم شبکه ای
به لطف یک سیستم دوازده ستونی، شش لایه پیشفرض پاسخگو، متغیرها و میکسهای Sass و دهها کلاس از پیش تعریفشده، از شبکه قدرتمند flexbox موبایل اول ما برای ساخت طرحبندیهایی در همه شکلها و اندازهها استفاده کنید.
مثال
سیستم شبکه بوت استرپ از مجموعه ای از کانتینرها، ردیف ها و ستون ها برای چیدمان و تراز کردن محتوا استفاده می کند. این با فلکس باکس ساخته شده است و کاملاً واکنش گرا است. در زیر یک مثال و توضیح عمیق برای نحوه ترکیب سیستم شبکه ارائه شده است.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
مثال بالا با استفاده از کلاسهای شبکه از پیش تعریفشده ما، سه ستون با عرض مساوی در همه دستگاهها و پورتهای دید ایجاد میکند. آن ستون ها در مرکز صفحه با والد .container
قرار دارند.
چگونه کار می کند
در تجزیه آن، در اینجا نحوه جمع آوری سیستم شبکه آمده است:
-
شبکه ما از شش نقطه شکست پاسخگو پشتیبانی می کند . نقاط انفصال بر اساس
min-width
جستارهای رسانه ای هستند، به این معنی که بر آن نقطه شکست و همه موارد بالاتر از آن تأثیر می گذارند (به عنوان مثال،.col-sm-4
برایsm
,md
,lg
,xl
وxxl
) اعمال می شود. این بدان معنی است که می توانید اندازه و رفتار کانتینر و ستون را با هر نقطه شکست کنترل کنید. -
کانتینرها محتوای شما را در مرکز و به صورت افقی قرار می دهند. برای
.container
عرض پیکسل پاسخگو،.container-fluid
برایwidth: 100%
همه درگاههای دید و دستگاهها، یا یک ظرف واکنشگرا (مثلاً.container-md
) برای ترکیبی از عرضهای سیال و پیکسل استفاده کنید. -
سطرها بسته بندی برای ستون ها هستند. هر ستون دارای افقی
padding
(به نام ناودان) برای کنترل فضای بین آنها است. سپسpadding
روی ردیفهایی با حاشیههای منفی خنثی میشود تا اطمینان حاصل شود که محتوای ستونهای شما به صورت بصری در سمت چپ تراز شده است. ردیفها همچنین از کلاسهای اصلاحکننده برای اعمال یکنواخت اندازه ستون و کلاسهای ناودانی برای تغییر فاصله محتوای شما پشتیبانی میکنند. -
ستون ها فوق العاده انعطاف پذیر هستند. 12 ستون الگو در هر سطر موجود است که به شما امکان می دهد ترکیب های مختلفی از عناصر را ایجاد کنید که هر تعداد ستون را در بر می گیرند. کلاسهای ستون تعداد ستونهای الگو را نشان میدهد (به عنوان مثال،
col-4
دهانه چهار).width
s بر حسب درصد تنظیم می شوند، بنابراین شما همیشه اندازه نسبی یکسانی دارید. -
ناودان ها نیز پاسخگو و قابل تنظیم هستند. کلاسهای ناودان در همه نقاط شکست، با اندازههای یکسانی با فاصلههای حاشیه و لایه ما در دسترس هستند . ناودان های افقی را با
.gx-*
کلاس ها، ناودان های عمودی را با.gy-*
یا همه ناودان ها را با.g-*
کلاس ها تغییر دهید..g-0
همچنین برای حذف ناودان ها موجود است. -
متغیرهای Sass، نقشهها و میکسها به شبکه قدرت میدهند. اگر نمیخواهید از کلاسهای شبکه از پیش تعریفشده در Bootstrap استفاده کنید، میتوانید از منبع شبکه ما Sass استفاده کنید تا کلاسهای خود را با نشانهگذاری معناییتر ایجاد کنید. ما همچنین برخی از ویژگی های سفارشی CSS را برای مصرف این متغیرهای Sass برای انعطاف پذیری بیشتر برای شما اضافه می کنیم.
از محدودیت ها و اشکالات پیرامون flexbox آگاه باشید ، مانند عدم توانایی در استفاده از برخی عناصر HTML به عنوان کانتینرهای انعطاف پذیر .
گزینه های شبکه
سیستم شبکه بوت استرپ میتواند با هر شش نقطه شکست پیشفرض و هر نقطه شکستی که سفارشی میکنید، سازگار شود. شش لایه شبکه پیش فرض به شرح زیر است:
- بسیار کوچک (xs)
- کوچک (sm)
- متوسط (md)
- بزرگ (lg)
- خیلی بزرگ (xl)
- فوق العاده بزرگ (xxl)
همانطور که در بالا ذکر شد، هر یک از این نقاط شکست دارای محفظه، پیشوند کلاس منحصر به فرد و اصلاح کننده های خود هستند. در اینجا نحوه تغییر شبکه در این نقاط شکست آمده است:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
ظرفmax-width |
هیچکدام (خودکار) | 540 پیکسل | 720 پیکسل | 960 پیکسل | 1140 پیکسل | 1320 پیکسل |
پیشوند کلاس | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# ستون | 12 | |||||
عرض ناودان | 1.5rem (.75rem در چپ و راست) | |||||
ناودان های سفارشی | آره | |||||
تودرتو | آره | |||||
ترتیب ستون | آره |
طرح بندی خودکار ستون ها
از کلاسهای ستون خاص نقطه شکست برای اندازهگیری آسان ستون بدون کلاس شمارهدار صریح مانند .col-sm-6
.
با عرض مساوی
برای مثال، در اینجا دو طرحبندی شبکهای وجود دارد که برای هر دستگاه و درگاه دید، از xs
تا xxl
. هر تعداد کلاس بدون واحد را برای هر نقطه شکستی که نیاز دارید اضافه کنید و عرض هر ستون یکسان خواهد بود.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
تنظیم یک عرض ستون
طرحبندی خودکار برای ستونهای شبکه flexbox همچنین به این معنی است که میتوانید عرض یک ستون را تنظیم کنید و اندازه ستونهای خواهر و برادر را بهطور خودکار در اطراف آن تغییر دهید. می توانید از کلاس های شبکه از پیش تعریف شده (همانطور که در زیر نشان داده شده است)، میکس های شبکه، یا عرض های درون خطی استفاده کنید. توجه داشته باشید که ستون های دیگر بدون توجه به عرض ستون مرکزی، اندازه آنها تغییر می کند.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
محتوای عرض متغیر
از col-{breakpoint}-auto
کلاس ها برای اندازه گیری ستون ها بر اساس عرض طبیعی محتوای آنها استفاده کنید.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
کلاس های پاسخگو
شبکه بوت استرپ شامل شش طبقه از کلاس های از پیش تعریف شده برای ساخت طرح بندی های پیچیده پاسخگو است. اندازه ستونهای خود را در دستگاههای بسیار کوچک، کوچک، متوسط، بزرگ یا بسیار بزرگ به هر نحوی که مناسب میدانید سفارشی کنید.
همه نقاط شکست
برای شبکههایی که از کوچکترین دستگاهها تا بزرگترین آنها یکسان هستند، از کلاسهای .col
and استفاده کنید. .col-*
زمانی که به ستونی با اندازه خاص نیاز دارید یک کلاس شماره گذاری شده را مشخص کنید. در غیر این صورت، با خیال راحت به .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
به صورت افقی روی هم چیده شده است
با استفاده از یک مجموعه واحد از .col-sm-*
کلاس ها، می توانید یک سیستم شبکه ای پایه ایجاد کنید که به صورت انباشته شروع می شود و در نقطه شکست کوچک ( sm
) افقی می شود.
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
ترکیب و مطابقت
آیا نمی خواهید ستون های شما به سادگی در برخی از لایه های شبکه جمع شوند؟ در صورت نیاز از ترکیبی از کلاس های مختلف برای هر ردیف استفاده کنید. برای درک بهتر نحوه کارکرد آن به مثال زیر مراجعه کنید.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
ستون های ردیف
از .row-cols-*
کلاسهای واکنشگرا برای تنظیم سریع تعداد ستونهایی که محتوا و طرحبندی شما را به بهترین شکل ارائه میکنند، استفاده کنید. .col-*
در حالی که کلاسهای معمولی برای ستونهای جداگانه اعمال میشوند (به عنوان مثال، .col-md-4
)، کلاسهای ستونهای ردیف در والد .row
به عنوان پیشفرض برای ستونهای حاوی تنظیم میشوند. با .row-cols-auto
شما می توانید به ستون ها عرض طبیعی خود را بدهید.
از این کلاسهای ستونهای ردیفی برای ایجاد سریع طرحبندیهای شبکهای اولیه یا کنترل طرحبندیهای کارت خود استفاده کنید و در صورت نیاز در سطح ستون لغو کنید.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
</div>
</div>
همچنین می توانید از Sass mixin همراه استفاده کنید row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
لانه سازی
برای قرار دادن محتوای خود با شبکه پیشفرض، یک ستون جدید .row
و مجموعهای از .col-sm-*
ستونها را در یک ستون موجود اضافه .col-sm-*
کنید. ردیفهای تودرتو باید شامل مجموعهای از ستونها باشد که مجموع آنها ۱۲ یا کمتر است (الزامی نیست که از همه ۱۲ ستون موجود استفاده کنید).
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
ساس
هنگام استفاده از فایلهای Sass منبع بوت استرپ، میتوانید از متغیرها و میکسهای Sass برای ایجاد طرحبندی صفحه سفارشی، معنایی و پاسخگو استفاده کنید. کلاسهای شبکه از پیش تعریفشده ما از همین متغیرها و میکسها استفاده میکنند تا مجموعه کاملی از کلاسهای آماده برای استفاده را برای طرحبندیهای پاسخگوی سریع ارائه دهند.
متغیرها
متغیرها و نقشهها تعداد ستونها، عرض ناودان و نقطه پرس و جو رسانهای را که در آن ستونهای شناور شروع میشود، تعیین میکنند. ما از اینها برای تولید کلاس های شبکه از پیش تعریف شده مستند شده در بالا و همچنین برای میکس های سفارشی فهرست شده در زیر استفاده می کنیم.
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
مخلوط ها
مخلوطها همراه با متغیرهای شبکه برای تولید CSS معنایی برای ستونهای شبکه جداگانه استفاده میشوند.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
مثال استفاده
می توانید متغیرها را به مقادیر سفارشی خود تغییر دهید یا فقط از میکس ها با مقادیر پیش فرض خود استفاده کنید. در اینجا نمونه ای از استفاده از تنظیمات پیش فرض برای ایجاد یک طرح بندی دو ستونی با فاصله بین آنها آورده شده است.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
سفارشی کردن شبکه
با استفاده از متغیرها و نقشههای Grid Sass داخلی، میتوان کلاسهای شبکه از پیش تعریفشده را بهطور کامل سفارشی کرد. تعداد لایهها، ابعاد درخواست رسانه و عرض ظرف را تغییر دهید—سپس دوباره کامپایل کنید.
ستون ها و ناودان ها
تعداد ستون های شبکه را می توان از طریق متغیرهای Sass تغییر داد. $grid-columns
برای تولید عرض (بر حسب درصد) هر ستون جداگانه استفاده می شود در حالی $grid-gutter-width
که عرض ناودان ستون را تنظیم می کند.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
لایه های شبکه
با حرکت فراتر از خود ستونها، میتوانید تعداد لایههای شبکه را نیز سفارشی کنید. اگر فقط چهار سطح شبکه میخواستید، $grid-breakpoints
و $container-max-widths
را به چیزی شبیه به این به روز کنید:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
هنگام ایجاد هر گونه تغییر در متغیرها یا نقشه های Sass، باید تغییرات خود را ذخیره کرده و دوباره کامپایل کنید. با انجام این کار، مجموعه ای کاملاً جدید از کلاس های شبکه از پیش تعریف شده برای عرض ستون ها، آفست ها و مرتب سازی تولید می شود. ابزارهای دید پاسخگو نیز برای استفاده از نقاط شکست سفارشی به روز خواهند شد. مطمئن شوید که مقادیر شبکه را در px
(نه rem
، em
یا %
) تنظیم کرده اید.