ڪنٽينر

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

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

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

• .container، جيڪو max-widthهر جوابي وقفي پوائنٽ تي سيٽ ڪري ٿو
• .container-{breakpoint}، جيڪو width: 100%مخصوص وقفي پوائنٽ تائين آهي
• .container-fluid، جيڪو 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 نقشن ۽ متغيرن کي ڪيئن تبديل ڪرڻ بابت وڌيڪ معلومات ۽ مثالن لاءِ، مھرباني ڪري ڏسو گرڊ دستاويزن جي ساس سيڪشن .