دەفرەکان

چۆن کاردەکەن

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

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

• .containermax-width، کە لە هەر خاڵێکی شکاندنی وەڵامدەرەوەدا a دادەنێت
• .container-fluid، کە width: 100%لە هەموو خاڵەکانی شکاندندایە
• .container-{breakpoint}، کە width: 100%تا خاڵی شکاندنی دیاریکراو دەبێت

خشتەی خوارەوە نیشان دەدات کە چۆن هەر دەفرێک max-widthبەراورد دەکرێت بە ئەسڵی .containerو .container-fluidلە سەرانسەری هەر خاڵێکی شکاندن.

بە کردار بیانبینە و لە نموونەی تۆڕەکەماندا بەراوردیان بکە .

کۆنتێنەری پێشوەختە

پۆلی پێشوەختەی ئێمە .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();
}

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