دەفرەکان
کۆنتێنەرەکان بلۆکێکی بنەڕەتی بنیاتنانی Bootstrapن کە ناوەڕۆکەکەت لەناو ئامێرێکی دیاریکراو یان ڤیوپۆرتێکی دیاریکراودا لەخۆدەگرن، پاد دەکەن و ڕێکدەخەن.
چۆن کاردەکەن
کۆنتێنەرەکان بنەڕەتیترین توخمەکانی نەخشەن لە Bootstrap و پێویستن لە کاتی بەکارهێنانی سیستەمی تۆڕی پێشوەختەمان . دەفرەکان بەکاردەهێنرێن بۆ هەڵگرتن و پادکردن و (هەندێکجار) ناوەندکردنی ناوەڕۆک لەناو خۆیاندا. لە کاتێکدا دەتوانرێت کۆنتێنەرەکان هێلانە بکرێت، زۆربەی نەخشەکان پێویستیان بە کۆنتێنەرێکی هێلانەکراو نییە.
بووتستراپ سێ کۆنتێنەری جیاوازی لەگەڵدایە:
.container
max-width
، کە لە هەر خاڵێکی شکاندنی وەڵامدەرەوەدا a دادەنێت.container-fluid
، کەwidth: 100%
لە هەموو خاڵەکانی شکاندندایە.container-{breakpoint}
، کەwidth: 100%
تا خاڵی شکاندنی دیاریکراو دەبێت
خشتەی خوارەوە نیشان دەدات کە چۆن هەر دەفرێک max-width
بەراورد دەکرێت بە ئەسڵی .container
و .container-fluid
لە سەرانسەری هەر خاڵێکی شکاندن.
بە کردار بیانبینە و لە نموونەی تۆڕەکەماندا بەراوردیان بکە .
بچووکی زیادە <576px |
بچووک ≥576px |
مامناوەند ≥768px |
گەورە ≥992px |
X-گەورە ≥1200px |
XX-گەورە ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
کۆنتێنەری پێشوەختە
پۆلی پێشوەختەی ئێمە .container
کۆنتێنەرێکی وەڵامدەرەوە و پانایی جێگیرە، واتە max-width
گۆڕانکارییەکانی لە هەر خاڵێکی شکاندندا.
<div class="container">
<!-- Content here -->
</div>
دەفری وەڵامدەرەوە
کۆنتێنەرە وەڵامدەرەوەکان ڕێگەت پێدەدەن پۆلێک دیاری بکەیت کە 100% پان بێت تاوەکو دەگاتە خاڵی شکاندنی دیاریکراو، دوای ئەوە ئێمە max-width
s بۆ هەریەک لە خاڵە شکاندنە بەرزەکان بەکاردەهێنین. بۆ نموونە، .container-sm
100% فراوانە بۆ دەستپێکردن تا دەگاتە sm
خاڵی شکاندن، لەوێدا بە md
, lg
, xl
, و گەورە دەبێت xxl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
دەفری شلە
.container-fluid
بۆ دەفرێکی تەواو پان بەکاریبهێنە ، کە تەواوی پانایی دەرچەی بینین دەگرێتەوە.
<div class="container-fluid">
...
</div>
ساس
وەک لە سەرەوە نیشان دراوە، Bootstrap زنجیرەیەک پۆلی پێشوەختە پێناسەکراوی کۆنتێنەر دروست دەکات بۆ ئەوەی یارمەتیت بدات لە دروستکردنی ئەو نەخشانەی کە ئارەزووی دەکەیت. دەتوانیت ئەم پۆلە پێشوەختە دیاریکراوانەی کۆنتێنەرانە خۆت بگۆڕیت بە دەستکاریکردنی نەخشەی Sass (لە _variables.scss
) کە هێزیان پێدەدات:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
جگە لە خۆکارکردنی ساس، دەتوانیت بە میکسینی ساسەکەمان کۆنتێنەری تایبەت بە خۆت دروست بکەیت.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
بۆ زانیاری زیاتر و نموونە لەسەر چۆنیەتی دەستکاریکردنی نەخشە و گۆڕاوەکانی ساسمان، تکایە سەردانی بەشی ساس بکە لە بەڵگەنامەکانی تۆڕ .