باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

دەفرەکان

کۆنتێنەرەکان بلۆکێکی بنەڕەتی بنیاتنانی Bootstrapن کە ناوەڕۆکەکەت لەناو ئامێرێکی دیاریکراو یان ڤیوپۆرتێکی دیاریکراودا لەخۆدەگرن، پاد دەکەن و ڕێکدەخەن.

چۆن کاردەکەن

کۆنتێنەرەکان بنەڕەتیترین توخمەکانی نەخشەن لە Bootstrap و پێویستن لە کاتی بەکارهێنانی سیستەمی تۆڕی پێشوەختەمان . دەفرەکان بەکاردەهێنرێن بۆ هەڵگرتن و پادکردن و (هەندێکجار) ناوەندکردنی ناوەڕۆک لەناو خۆیاندا. لە کاتێکدا دەتوانرێت کۆنتێنەرەکان هێلانە بکرێت، زۆربەی نەخشەکان پێویستیان بە کۆنتێنەرێکی هێلانەکراو نییە.

بووتستراپ سێ کۆنتێنەری جیاوازی لەگەڵدایە:

  • .containermax-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-widths بۆ هەریەک لە خاڵە شکاندنە بەرزەکان بەکاردەهێنین. بۆ نموونە، .container-sm100% فراوانە بۆ دەستپێکردن تا دەگاتە 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();
}

بۆ زانیاری زیاتر و نموونە لەسەر چۆنیەتی دەستکاریکردنی نەخشە و گۆڕاوەکانی ساسمان، تکایە سەردانی بەشی ساس بکە لە بەڵگەنامەکانی تۆڕ .