کنٹینرز

کنٹینرز بوٹسٹریپ کا ایک بنیادی بلڈنگ بلاک ہیں جس میں آپ کے مواد کو کسی دیے گئے آلے یا ویو پورٹ میں شامل، پیڈ اور سیدھ میں لایا جاتا ہے۔

اس صفحہ پر

وہ کیسے کام کرتے ہیں۔

کنٹینرز بوٹسٹریپ میں لے آؤٹ کا سب سے بنیادی عنصر ہیں اور ہمارے ڈیفالٹ گرڈ سسٹم کو استعمال کرتے وقت اس کی ضرورت ہوتی ہے ۔ کنٹینرز کا استعمال ان کے اندر موجود مواد کو رکھنے، پیڈ کرنے اور (کبھی کبھی) مرکز کرنے کے لیے کیا جاتا ہے۔ اگرچہ کنٹینرز کو نیسٹڈ کیا جا سکتا ہے، لیکن زیادہ تر لے آؤٹ کو نیسٹڈ کنٹینر کی ضرورت نہیں ہوتی ہے۔

بوٹسٹریپ تین مختلف کنٹینرز کے ساتھ آتا ہے:

.container، جو max-widthہر جوابی بریک پوائنٹ پر سیٹ کرتا ہے۔
.container-{breakpoint}، جو width: 100%مخصوص بریک پوائنٹ تک ہے۔
.container-fluid، جو 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-widthہر ایک اعلی بریک پوائنٹ کے لیے s کا اطلاق کرتے ہیں۔ مثال کے طور پر، بریک پوائنٹ .container-smتک پہنچنے تک شروع کرنے کے لیے 100% چوڑا ہے ، جہاں یہ , , , اور کے ساتھ پیمانہ ہوگا۔smmdlgxlxxl

<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 کو اپنی مرضی کے مطابق کرنے کے علاوہ، آپ ہمارے 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 نقشوں اور متغیرات میں ترمیم کرنے کے طریقے کے بارے میں مزید معلومات اور مثالوں کے لیے، براہ کرم گرڈ دستاویزات کے Sass سیکشن سے رجوع کریں ۔