ڪنٽينر

اهي ڪيئن ڪم ڪن ٿا

ڪنٽينر بوٽ اسٽريپ ۾ سڀ کان وڌيڪ بنيادي ترتيب واري عنصر آهن ۽ اسان جي ڊفالٽ گرڊ سسٽم کي استعمال ڪرڻ وقت گهربل آهن . ڪنٽينر استعمال ڪيا ويندا آهن، پيڊ، ۽ (ڪڏهن ڪڏهن) انهن جي اندر مواد کي مرڪز ڪرڻ لاء. جڏهن ته ڪنٽينر nested ٿي سگهن ٿا، اڪثر layouts هڪ nested ڪنٽينر جي ضرورت نه ڪندا آھن.

بوٽ اسٽراپ ٽن مختلف ڪنٽينرز سان گڏ اچي ٿو:

• .container، جيڪو max-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, xl, and 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>

ساس

جيئن مٿي ڏيکاريل آهي، بوٽ اسٽراپ اڳواٽ بيان ڪيل ڪنٽينر ڪلاسن جو هڪ سلسلو ٺاهي ٿو توهان جي مدد ڪرڻ لاءِ جيڪي توهان چاهيو ٿا ترتيب ڏيو. توھان انھن اڳواٽ بيان ڪيل ڪنٽينر طبقن کي ترتيب ڏئي سگھو ٿا ساس نقشي کي تبديل ڪندي (۾ مليو _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 نقشن ۽ متغيرن کي ڪيئن تبديل ڪرڻ بابت وڌيڪ معلومات ۽ مثالن لاءِ، مھرباني ڪري ڏسو گرڊ دستاويزن جي ساس سيڪشن .