گرڈ سسٹم
بارہ کالم سسٹم، چھ ڈیفالٹ ریسپانسیو ٹائرز، ساس ویری ایبلز اور مکسینز، اور درجنوں پہلے سے طے شدہ کلاسز کی بدولت تمام شکلوں اور سائز کے لے آؤٹ بنانے کے لیے ہماری طاقتور موبائل فرسٹ فلیکس باکس گرڈ کا استعمال کریں۔
مثال
بوٹسٹریپ کا گرڈ سسٹم مواد کو ترتیب دینے اور ترتیب دینے کے لیے کنٹینرز، قطاروں اور کالموں کی ایک سیریز کا استعمال کرتا ہے۔ یہ flexbox کے ساتھ بنایا گیا ہے اور مکمل طور پر ذمہ دار ہے۔ ذیل میں ایک مثال اور گہرائی سے وضاحت دی گئی ہے کہ گرڈ سسٹم کیسے اکٹھا ہوتا ہے۔
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
مندرجہ بالا مثال ہماری پہلے سے طے شدہ گرڈ کلاسز کا استعمال کرتے ہوئے تمام آلات اور ویو پورٹس پر تین مساوی چوڑائی والے کالم بناتی ہے۔ وہ کالم صفحہ میں پیرنٹ کے ساتھ مرکز میں ہوتے ہیں .container
۔
یہ کیسے کام کرتا ہے
اسے توڑتے ہوئے، یہ ہے کہ گرڈ سسٹم کیسے اکٹھا ہوتا ہے:
-
ہمارا گرڈ چھ ریسپانسیو بریک پوائنٹس کو سپورٹ کرتا ہے۔
min-width
بریک پوائنٹس میڈیا کے سوالات پر مبنی ہوتے ہیں ، یعنی وہ اس بریک پوائنٹ اور اس سے اوپر والے تمام لوگوں کو متاثر کرتے ہیں (مثال کے طور پر،.col-sm-4
پر لاگو ہوتا ہےsm
,md
,lg
,xl
اورxxl
)۔ اس کا مطلب ہے کہ آپ ہر بریک پوائنٹ کے ذریعے کنٹینر اور کالم کے سائز اور رویے کو کنٹرول کر سکتے ہیں۔ -
کنٹینرز بیچ میں اور افقی طور پر آپ کے مواد کو پیڈ کریں۔
.container
ایک ریسپانسیو پکسل چوڑائی کے.container-fluid
لیے ،width: 100%
تمام ویو پورٹس اور ڈیوائسز کے لیے، یا ایک ریسپانسیو کنٹینر (مثلاً،.container-md
) سیال اور پکسل کی چوڑائی کے امتزاج کے لیے استعمال کریں ۔ -
قطاریں کالموں کے لیے ریپرز ہیں۔ ان کے درمیان کی جگہ کو کنٹرول کرنے کے لیے ہر کالم میں افقی
padding
(جسے گٹر کہا جاتا ہے) ہوتا ہے۔ اسpadding
کے بعد قطاروں میں منفی مارجن کے ساتھ اس کا مقابلہ کیا جاتا ہے تاکہ یہ یقینی بنایا جا سکے کہ آپ کے کالموں میں موجود مواد کو بصری طور پر بائیں جانب سے نیچے کی طرف سیدھ میں رکھا گیا ہے۔ قطاریں آپ کے مواد کے فاصلہ کو تبدیل کرنے کے لیے کالم سائزنگ اور گٹر کلاسز کو یکساں طور پر لاگو کرنے کے لیے موڈیفائر کلاسز کو بھی سپورٹ کرتی ہیں۔ -
کالم ناقابل یقین حد تک لچکدار ہیں۔ فی قطار میں 12 ٹیمپلیٹ کالم دستیاب ہیں، جو آپ کو عناصر کے مختلف مجموعے بنانے کی اجازت دیتے ہیں جو کسی بھی تعداد میں کالم پر محیط ہوں۔ کالم کلاس اسپین کے لیے ٹیمپلیٹ کالموں کی تعداد کی نشاندہی کرتی ہے (مثال کے طور پر،
col-4
چار پھیلی ہوئی ہے)۔width
s کو فیصد میں سیٹ کیا جاتا ہے لہذا آپ کے پاس ہمیشہ ایک ہی رشتہ دار سائز ہوتا ہے۔ -
گٹر بھی جوابدہ اور حسب ضرورت ہیں۔ گٹر کلاسز تمام بریک پوائنٹس پر دستیاب ہیں، ہمارے مارجن اور پیڈنگ اسپیسنگ کے برابر سائز کے ساتھ ۔ کلاسوں کے ساتھ افقی گٹر
.gx-*
، عمودی گٹر کے ساتھ.gy-*
، یا تمام گٹر کو.g-*
کلاسوں کے ساتھ تبدیل کریں۔.g-0
گٹر کو ہٹانے کے لیے بھی دستیاب ہے۔ -
ساس متغیرات، نقشے، اور مکسنس گرڈ کو طاقت دیتے ہیں۔ اگر آپ بوٹسٹریپ میں پہلے سے طے شدہ گرڈ کلاسز کو استعمال نہیں کرنا چاہتے ہیں، تو آپ ہمارے گرڈ کے ماخذ Sass کو مزید سیمنٹک مارک اپ کے ساتھ خود بنانے کے لیے استعمال کر سکتے ہیں۔ ہم ان Sass متغیرات کو استعمال کرنے کے لیے کچھ CSS حسب ضرورت خصوصیات بھی شامل کرتے ہیں تاکہ آپ کے لیے اور بھی زیادہ لچک ہو۔
flexbox کے ارد گرد کی حدود اور کیڑے سے آگاہ رہیں ، جیسے کچھ HTML عناصر کو فلیکس کنٹینرز کے طور پر استعمال کرنے میں ناکامی ۔
گرڈ کے اختیارات
بوٹسٹریپ کا گرڈ سسٹم تمام چھ ڈیفالٹ بریک پوائنٹس، اور کسی بھی بریک پوائنٹس کو جو آپ اپنی مرضی کے مطابق بناتے ہیں۔ چھ پہلے سے طے شدہ گرڈ درجے درج ذیل ہیں:
- اضافی چھوٹا (xs)
- چھوٹا (sm)
- درمیانہ (md)
- بڑا (ایل جی)
- اضافی بڑا (xl)
- اضافی اضافی بڑا (xxl)
جیسا کہ اوپر بتایا گیا ہے، ان میں سے ہر ایک بریک پوائنٹ کا اپنا کنٹینر، منفرد کلاس کا سابقہ، اور ترمیم کرنے والے ہیں۔ یہاں یہ ہے کہ ان بریک پوائنٹس میں گرڈ کیسے بدلتا ہے:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
کنٹینرmax-width |
کوئی نہیں (خودکار) | 540px | 720px | 960px | 1140px | 1320px |
کلاس کا سابقہ | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
کالمز کا # | 12 | |||||
گٹر کی چوڑائی | 1.5rem (.75rem بائیں اور دائیں) | |||||
حسب ضرورت گٹر | جی ہاں | |||||
نیسٹیبل | جی ہاں | |||||
کالم ترتیب دینا | جی ہاں |
خودکار ترتیب والے کالم
بغیر کسی واضح نمبر والی کلاس کے آسان کالم سائز کے لیے بریک پوائنٹ کے لیے مخصوص کالم کلاسز کا استعمال .col-sm-6
کریں۔
مساوی چوڑائی
مثال کے طور پر، یہاں دو گرڈ لے آؤٹ ہیں جو ہر ڈیوائس اور ویو پورٹ پر لاگو ہوتے ہیں، سے لے xs
کر تک xxl
۔ آپ کو ہر بریک پوائنٹ کے لیے یونٹ سے کم کلاسز کی تعداد شامل کریں اور ہر کالم ایک ہی چوڑائی کا ہوگا۔
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
ایک کالم کی چوڑائی کا تعین کرنا
فلیکس باکس گرڈ کالموں کے لیے خودکار ترتیب کا مطلب یہ بھی ہے کہ آپ ایک کالم کی چوڑائی سیٹ کر سکتے ہیں اور اس کے ارد گرد بہن بھائی کالم کا خود بخود سائز تبدیل کر سکتے ہیں۔ آپ پہلے سے طے شدہ گرڈ کلاسز (جیسا کہ نیچے دکھایا گیا ہے)، گرڈ مکسنس، یا ان لائن چوڑائی استعمال کر سکتے ہیں۔ نوٹ کریں کہ دوسرے کالموں کا سائز تبدیل ہو جائے گا اس سے قطع نظر کہ درمیانی کالم کی چوڑائی کچھ بھی ہو۔
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
متغیر چوڑائی کا مواد
col-{breakpoint}-auto
کالموں کو ان کے مواد کی قدرتی چوڑائی کی بنیاد پر سائز کرنے کے لیے کلاسز کا استعمال کریں ۔
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
جوابدہ کلاسز
بوٹسٹریپ کے گرڈ میں پیچیدہ ریسپانسیو لے آؤٹ بنانے کے لیے پہلے سے طے شدہ کلاسز کے چھ درجے شامل ہیں۔ اضافی چھوٹے، چھوٹے، درمیانے، بڑے، یا اضافی بڑے آلات پر اپنے کالموں کے سائز کو حسب ضرورت بنائیں تاہم آپ کو مناسب لگے۔
تمام بریک پوائنٹس
ان گرڈز کے لیے جو چھوٹے آلات سے لے کر بڑے تک یکساں ہیں، .col
اور .col-*
کلاسز کا استعمال کریں۔ جب آپ کو کسی خاص سائز کے کالم کی ضرورت ہو تو ایک نمبر والی کلاس کی وضاحت کریں۔ دوسری صورت میں، پر قائم رہنے کے لئے آزاد محسوس کرتے ہیں .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
افقی پر سجا دیا گیا۔
کلاسوں کے ایک سیٹ کا استعمال کرتے ہوئے .col-sm-*
، آپ ایک بنیادی گرڈ سسٹم بنا سکتے ہیں جو اسٹیک سے شروع ہوتا ہے اور چھوٹے بریک پوائنٹ ( sm
) پر افقی ہو جاتا ہے۔
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
مکس اینڈ میچ کریں۔
کیا آپ نہیں چاہتے کہ آپ کے کالم صرف کچھ گرڈ ٹائر میں اسٹیک ہو جائیں؟ ضرورت کے مطابق ہر درجے کے لیے مختلف کلاسوں کا مجموعہ استعمال کریں۔ یہ سب کیسے کام کرتا ہے اس کے بہتر خیال کے لیے نیچے دی گئی مثال دیکھیں۔
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
قطار کے کالم
.row-cols-*
آپ کے مواد اور ترتیب کو بہترین انداز میں پیش کرنے والے کالموں کی تعداد کو تیزی سے سیٹ کرنے کے لیے ریسپانسیو کلاسز کا استعمال کریں ۔ جبکہ نارمل .col-*
کلاسز انفرادی کالموں پر لاگو ہوتی ہیں (مثلاً، .col-md-4
)، قطار کالم کی کلاسیں .row
شامل کالموں کے لیے بطور ڈیفالٹ پیرنٹ پر سیٹ ہوتی ہیں۔ آپ .row-cols-auto
کالموں کو ان کی قدرتی چوڑائی دے سکتے ہیں۔
بنیادی گرڈ لے آؤٹ کو تیزی سے بنانے کے لیے یا اپنے کارڈ لے آؤٹ کو کنٹرول کرنے اور کالم کی سطح پر ضرورت پڑنے پر اوور رائڈ کرنے کے لیے ان قطار کالم کلاسز کا استعمال کریں۔
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
</div>
</div>
آپ اس کے ساتھ موجود Sass mixin کو بھی استعمال کر سکتے ہیں row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
گھونسلہ
اپنے مواد کو ڈیفالٹ گرڈ کے ساتھ نیسٹ کرنے کے لیے، موجودہ کالم کے اندر ایک نیا .row
اور کالموں کا سیٹ شامل کریں ۔ نیسٹڈ قطاروں میں کالموں کا ایک سیٹ شامل ہونا چاہئے جس میں 12 یا اس سے کم کا اضافہ ہوتا ہے (یہ ضروری نہیں ہے کہ آپ تمام 12 دستیاب کالم استعمال کریں)۔.col-sm-*
.col-sm-*
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
سس
بوٹسٹریپ کے سورس Sass فائلوں کو استعمال کرتے وقت، آپ کے پاس حسب ضرورت، سیمنٹک، اور رسپانسیو پیج لے آؤٹ بنانے کے لیے Sass متغیرات اور مکسنس استعمال کرنے کا اختیار ہوتا ہے۔ ہماری پہلے سے طے شدہ گرڈ کلاسیں انہی متغیرات اور مکسنز کو استعمال کرتی ہیں تاکہ تیز رفتار جوابی ترتیب کے لیے استعمال کے لیے تیار کلاسوں کا ایک مکمل مجموعہ فراہم کیا جا سکے۔
متغیرات
متغیرات اور نقشے کالموں کی تعداد، گٹر کی چوڑائی، اور میڈیا کے استفسار کے نقطہ کا تعین کرتے ہیں جس پر تیرتے ہوئے کالم شروع کیے جائیں۔ ہم ان کا استعمال اوپر بیان کردہ پہلے سے طے شدہ گرڈ کلاسز کے ساتھ ساتھ ذیل میں درج حسب ضرورت مکسنس کے لیے بھی کرتے ہیں۔
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
مکسنس
مکسینز کو گرڈ متغیر کے ساتھ مل کر استعمال کیا جاتا ہے تاکہ انفرادی گرڈ کالموں کے لیے سیمنٹک سی ایس ایس تیار کیا جا سکے۔
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
استعمال کی مثال
آپ متغیرات کو اپنی مرضی کے مطابق اقدار میں تبدیل کر سکتے ہیں، یا صرف ان کی ڈیفالٹ اقدار کے ساتھ مکسنس استعمال کر سکتے ہیں۔ یہاں ایک دو کالم لے آؤٹ بنانے کے لیے پہلے سے طے شدہ ترتیبات کو استعمال کرنے کی ایک مثال ہے جس کے درمیان وقفہ ہے۔
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
گرڈ کو حسب ضرورت بنانا
ہمارے بلٹ ان گرڈ Sass متغیرات اور نقشوں کا استعمال کرتے ہوئے، پہلے سے طے شدہ گرڈ کلاسز کو مکمل طور پر اپنی مرضی کے مطابق بنانا ممکن ہے۔ درجات کی تعداد، میڈیا کے استفسار کے طول و عرض، اور کنٹینر کی چوڑائیوں کو تبدیل کریں—پھر دوبارہ مرتب کریں۔
کالم اور گٹر
گرڈ کالموں کی تعداد کو ساس متغیر کے ذریعے تبدیل کیا جا سکتا ہے۔ $grid-columns
ہر انفرادی کالم کی چوڑائی (فیصد میں) پیدا کرنے کے لیے استعمال کیا جاتا ہے جبکہ $grid-gutter-width
کالم گٹر کے لیے چوڑائی سیٹ کرتا ہے۔
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
گرڈ ٹائرز
کالموں سے آگے بڑھتے ہوئے، آپ گرڈ ٹائرز کی تعداد کو بھی اپنی مرضی کے مطابق بنا سکتے ہیں۔ اگر آپ صرف چار گرڈ ٹائر چاہتے ہیں، تو آپ $grid-breakpoints
اور $container-max-widths
کو کچھ اس طرح اپ ڈیٹ کریں گے:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Sass متغیرات یا نقشوں میں کوئی تبدیلی کرتے وقت، آپ کو اپنی تبدیلیاں محفوظ کرنے اور دوبارہ مرتب کرنے کی ضرورت ہوگی۔ ایسا کرنے سے کالم کی چوڑائی، آفسیٹس اور آرڈرنگ کے لیے پہلے سے طے شدہ گرڈ کلاسز کا بالکل نیا سیٹ آؤٹ پٹ ہوگا۔ حسب ضرورت بریک پوائنٹس کو استعمال کرنے کے لیے ریسپانسیو ویزیبلٹی یوٹیلیٹیز کو بھی اپ ڈیٹ کیا جائے گا۔ اس بات کو یقینی بنائیں کہ گرڈ کی قدریں px
(نہیں rem
، em
یا %
) میں سیٹ کریں۔