کانټینرونه

دوی څنګه کار کوي

کانټینرونه په بوټسټریپ کې ترټولو لومړني ترتیب عنصر دي او زموږ د ډیفالټ گرډ سیسټم کارولو پرمهال اړین دي . کانټینرونه د مینځپانګې مینځپانګې ، پیډ ، او (کله ناکله) د مینځپانګې مینځلو لپاره کارول کیږي. پداسې حال کې چې کانټینرونه ځړول کیدی شي، ډیری ترتیبونه د ځړول شوي کانټینر ته اړتیا نلري.

بوټسټریپ د دریو مختلف کانټینرونو سره راځي:

• .containermax-width، کوم چې په هر ځواب ویونکي وقفه کې ټاکي
• .container-fluid، کوم چې width: 100%په ټولو وقفو کې دی
• .container-{breakpoint}، کوم چې width: 100%د ټاکلي وقفې پورې وي

لاندې جدول روښانه کوي چې څنګه هر کانټینر د max-widthاصلي سره .containerاو .container-fluidد هرې وقفې نقطې سره پرتله کوي.

دوی په عمل کې وګورئ او زموږ د ګریډ مثال کې یې پرتله کړئ .

ډیفالټ کانټینر

زموږ ډیفالټ .containerټولګی یو ځواب ویونکی ، ثابت پلن کانټینر دی ، پدې معنی چې max-widthپه هر وقفه کې د هغې بدلونونه.

<div class="container">
  <!-- Content here -->
</div>

ځواب ویونکي کانتینرونه

ځواب ورکوونکي کانتینرونه تاسو ته اجازه درکوي چې یو ټولګي مشخص کړئ چې 100٪ پراخه وي تر هغه چې ټاکل شوي وقفې ته ورسیږي، له هغې وروسته موږ max-widthد هرې لوړې وقفې لپاره s غوښتنه کوو. د مثال په توګه، .container-smد پیل کولو لپاره 100٪ پراخ دی تر هغه چې د smوقفې نقطې ته ورسیږي، چیرته چې دا به د md,،، او lgسره اندازه شي .xlxxl

<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>

ساس

لکه څنګه چې پورته ښودل شوي، بوټسټریپ د وړاندې شوي کانټینر ټولګیو لړۍ رامینځته کوي ترڅو تاسو سره د هغه ترتیبونو په جوړولو کې مرسته وکړي چې تاسو یې غواړئ. تاسو کولی شئ د Sass نقشې (په کې موندل شوي _variables.scss) چې دوی ته ځواک ورکوي په تعدیل کولو سره دا دمخه ټاکل شوي کانټینر ټولګي تنظیم کړئ:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

د Sass دودیز کولو سربیره، تاسو کولی شئ زموږ د ساس مکسین سره خپل کانټینرونه هم جوړ کړئ.

// 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();
}

د نورو معلوماتو او مثالونو لپاره چې څنګه زموږ د Sass نقشې او تغیرات بدل کړئ، مهرباني وکړئ د ګریډ اسنادو ساس برخې ته مراجعه وکړئ .