کنٹینرز
کنٹینرز بوٹسٹریپ کا ایک بنیادی بلڈنگ بلاک ہیں جس میں آپ کے مواد کو کسی دیے گئے آلے یا ویو پورٹ میں شامل، پیڈ اور سیدھ میں لایا جاتا ہے۔
وہ کیسے کام کرتے ہیں۔
کنٹینرز بوٹسٹریپ میں لے آؤٹ کا سب سے بنیادی عنصر ہیں اور ہمارے ڈیفالٹ گرڈ سسٹم کو استعمال کرتے وقت اس کی ضرورت ہوتی ہے ۔ کنٹینرز کا استعمال ان کے اندر موجود مواد کو رکھنے، پیڈ کرنے اور (کبھی کبھی) مرکز کرنے کے لیے کیا جاتا ہے۔ اگرچہ کنٹینرز کو نیسٹڈ کیا جا سکتا ہے، لیکن زیادہ تر لے آؤٹ کو نیسٹڈ کنٹینر کی ضرورت نہیں ہوتی ہے۔
بوٹسٹریپ تین مختلف کنٹینرز کے ساتھ آتا ہے:
.container
، جوmax-width
ہر جوابی بریک پوائنٹ پر سیٹ کرتا ہے۔.container-fluid
، جوwidth: 100%
تمام بریک پوائنٹس پر ہے۔.container-{breakpoint}
، جوwidth: 100%
مخصوص بریک پوائنٹ تک ہے۔
نیچے دی گئی جدول واضح کرتی ہے کہ کس طرح ہر کنٹینر کا اصل اور ہر بریک پوائنٹ max-width
سے موازنہ ہوتا ہے ۔.container
.container-fluid
انہیں عمل میں دیکھیں اور ہماری گرڈ مثال میں ان کا موازنہ کریں ۔
اضافی چھوٹا <576px |
چھوٹا ≥576px |
میڈیم ≥768px |
بڑا ≥992px |
X-Large ≥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% چوڑا ہے ، جہاں یہ , , , اور کے ساتھ پیمانہ ہوگا۔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>
سس
جیسا کہ اوپر دکھایا گیا ہے، بوٹسٹریپ پہلے سے طے شدہ کنٹینر کلاسز کی ایک سیریز تیار کرتا ہے تاکہ آپ اپنی مطلوبہ ترتیب کو بنانے میں آپ کی مدد کریں۔ آپ ان پہلے سے طے شدہ کنٹینر کلاسوں کو 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 سیکشن سے رجوع کریں ۔