گرڈ سسٹم
بارہ کالم سسٹم، پانچ ڈیفالٹ ریسپانسیو ٹائرز، ساس ویری ایبلز اور مکسینز، اور درجنوں پہلے سے طے شدہ کلاسز کی بدولت تمام شکلوں اور سائز کے لے آؤٹ بنانے کے لیے ہماری طاقتور موبائل فرسٹ فلیکس باکس گرڈ کا استعمال کریں۔
یہ کیسے کام کرتا ہے
بوٹسٹریپ کا گرڈ سسٹم مواد کو ترتیب دینے اور ترتیب دینے کے لیے کنٹینرز، قطاروں اور کالموں کی ایک سیریز کا استعمال کرتا ہے۔ یہ flexbox کے ساتھ بنایا گیا ہے اور مکمل طور پر ذمہ دار ہے۔ ذیل میں ایک مثال اور ایک گہرائی سے نظر ہے کہ گرڈ کیسے اکٹھا ہوتا ہے۔
flexbox کے لیے نئے یا ناواقف ہیں؟ پس منظر، اصطلاحات، رہنما خطوط، اور کوڈ کے ٹکڑوں کے لیے یہ CSS ٹرکس فلیکس باکس گائیڈ پڑھیں ۔
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
مندرجہ بالا مثال ہماری پہلے سے طے شدہ گرڈ کلاسز کا استعمال کرتے ہوئے چھوٹے، درمیانے، بڑے، اور اضافی بڑے آلات پر تین مساوی چوڑائی والے کالم بناتی ہے۔ وہ کالم صفحہ میں والدین کے ساتھ مرکز میں ہوتے ہیں .container
۔
اسے توڑنا، یہاں یہ ہے کہ یہ کیسے کام کرتا ہے:
- کنٹینرز آپ کی سائٹ کے مواد کو مرکز اور افقی طور پر پیڈ کرنے کا ذریعہ فراہم کرتے ہیں۔
.container
ریسپانسیو پکسل چوڑائی.container-fluid
کے لیے یاwidth: 100%
تمام ویو پورٹ اور ڈیوائس کے سائز کے لیے استعمال کریں ۔ - قطاریں کالموں کے لیے ریپرز ہیں۔ ان کے درمیان کی جگہ کو کنٹرول کرنے کے لیے ہر کالم میں افقی
padding
(جسے گٹر کہا جاتا ہے) ہوتا ہے۔ اسpadding
کے بعد قطاروں پر منفی مارجن کے ساتھ مقابلہ کیا جاتا ہے۔ اس طرح، آپ کے کالم میں موجود تمام مواد کو بصری طور پر بائیں جانب سے نیچے کی طرف سیدھ میں کیا جاتا ہے۔ - گرڈ لے آؤٹ میں، مواد کو کالموں کے اندر رکھا جانا چاہیے اور صرف کالم ہی قطاروں کے فوری بچے ہو سکتے ہیں۔
- فلیکس باکس کی بدولت، بغیر کسی مخصوص کے گرڈ کالم
width
خود بخود برابر چوڑائی والے کالم کے طور پر لے آؤٹ ہو جائیں گے۔ مثال کے طور پر، وِل کی چار مثالیں.col-sm
خود بخود چھوٹے بریک پوائنٹ اور اس سے اوپر سے 25% چوڑی ہو جائیں گی۔ مزید مثالوں کے لیے خودکار ترتیب والے کالم سیکشن دیکھیں ۔ - کالم کلاسز ان کالموں کی تعداد کی نشاندہی کرتی ہیں جنہیں آپ فی قطار ممکنہ 12 میں سے استعمال کرنا چاہتے ہیں۔ لہذا، اگر آپ تین برابر چوڑائی والے کالم چاہتے ہیں، تو آپ استعمال کر سکتے ہیں
.col-4
۔ - کالم
width
s فیصد میں سیٹ کیے جاتے ہیں، اس لیے وہ ہمیشہ اپنے بنیادی عنصر کی نسبت سیال اور سائز کے ہوتے ہیں۔ padding
انفرادی کالموں کے درمیان گٹر بنانے کے لیے کالم افقی ہوتے ہیں، تاہم، آپmargin
قطاروںpadding
سے اور کالموں سے.no-gutters
on کے ساتھ ہٹا سکتے ہیں.row
۔- گرڈ کو ریسپانسیو بنانے کے لیے، پانچ گرڈ بریک پوائنٹس ہیں، ہر ریسپانسیو بریک پوائنٹ کے لیے ایک : تمام بریک پوائنٹس (اضافی چھوٹے)، چھوٹے، درمیانے، بڑے اور اضافی بڑے۔
- گرڈ بریک پوائنٹس کم از کم چوڑائی والے میڈیا سوالات پر مبنی ہوتے ہیں، یعنی وہ اس ایک بریک پوائنٹ اور اس سے اوپر والے تمام پر لاگو ہوتے ہیں (مثال کے طور پر،
.col-sm-4
چھوٹے، درمیانے، بڑے، اور اضافی بڑے آلات پر لاگو ہوتا ہے، لیکن پہلےxs
بریک پوائنٹ پر نہیں)۔ - آپ پہلے سے طے شدہ گرڈ کلاسز (جیسے
.col-4
) یا Sass mixins کو مزید سیمنٹک مارک اپ کے لیے استعمال کر سکتے ہیں۔
flexbox کے ارد گرد کی حدود اور کیڑے سے آگاہ رہیں ، جیسے کچھ HTML عناصر کو فلیکس کنٹینرز کے طور پر استعمال کرنے میں ناکامی ۔
گرڈ کے اختیارات
جبکہ بوٹسٹریپ زیادہ تر سائز کی وضاحت کے لیے em
s یا s کا استعمال کرتا ہے، s کو گرڈ بریک پوائنٹس اور کنٹینر کی چوڑائی کے لیے استعمال کیا جاتا ہے۔ اس کی وجہ یہ ہے کہ ویو پورٹ کی چوڑائی پکسلز میں ہے اور فونٹ کے سائز کے ساتھ تبدیل نہیں ہوتی ہے۔rem
px
دیکھیں کہ بوٹسٹریپ گرڈ سسٹم کے پہلو کس طرح ایک آسان ٹیبل کے ساتھ متعدد آلات پر کام کرتے ہیں۔
اضافی چھوٹا <576px |
چھوٹا ≥576px |
میڈیم ≥768px |
بڑا ≥992px |
اضافی بڑا ≥1200px |
|
---|---|---|---|---|---|
زیادہ سے زیادہ کنٹینر کی چوڑائی | کوئی نہیں (خودکار) | 540px | 720px | 960px | 1140px |
کلاس کا سابقہ | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
کالموں کا # | 12 | ||||
گٹر کی چوڑائی | 30px (کالم کے ہر طرف 15px) | ||||
نیسٹیبل | جی ہاں | ||||
کالم ترتیب دینا | جی ہاں |
خودکار ترتیب والے کالم
بغیر کسی واضح نمبر والی کلاس کے آسان کالم سائز کے لیے بریک پوائنٹ کے لیے مخصوص کالم کلاسز کا استعمال .col-sm-6
کریں۔
مساوی چوڑائی
مثال کے طور پر، یہاں دو گرڈ لے آؤٹ ہیں جو ہر ڈیوائس اور ویو پورٹ پر لاگو ہوتے ہیں، سے لے xs
کر تک xl
۔ آپ کو ہر بریک پوائنٹ کے لیے یونٹ سے کم کلاسز کی تعداد شامل کریں اور ہر کالم ایک ہی چوڑائی کا ہوگا۔
<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>
مساوی چوڑائی کثیر لائن
مساوی چوڑائی والے کالم بنائیں جو ایک سے زیادہ لائنوں پر پھیلے ہوئے .w-100
ہوں جہاں آپ چاہتے ہیں کہ کالم نئی لائن میں داخل ہوں۔ .w-100
کچھ ریسپانسیو ڈسپلے یوٹیلیٹیز کے ساتھ ملا کر وقفوں کو ریسپانسیو بنائیں ۔
ایک Safari flexbox بگ تھا جس نے اسے بغیر کسی واضح flex-basis
یا کے کام کرنے سے روک دیا border
۔ پرانے براؤزر ورژن کے لیے حل موجود ہیں، لیکن اگر آپ کے ٹارگٹ براؤزرز بگی ورژن میں نہیں آتے ہیں تو ان کی ضرورت نہیں ہونی چاہیے۔
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</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>
گٹر
گٹروں کو بریک پوائنٹ کے لیے مخصوص پیڈنگ اور منفی مارجن یوٹیلیٹی کلاسز کے ذریعے جوابی طور پر ایڈجسٹ کیا جا سکتا ہے۔ دی گئی قطار میں گٹروں کو تبدیل کرنے کے لیے، s پر ایک منفی مارجن یوٹیلیٹی .row
اور میچنگ پیڈنگ یوٹیلیٹی کو جوڑیں .col
۔ .container
یا والدین کو .container-fluid
بھی غیر مطلوبہ اوور فلو سے بچنے کے لیے ایڈجسٹ کرنے کی ضرورت پڑ سکتی ہے، دوبارہ میچنگ پیڈنگ یوٹیلیٹی کا استعمال کرتے ہوئے۔
lg
یہاں بڑے ( ) بریک پوائنٹ اور اس سے اوپر والے بوٹسٹریپ گرڈ کو حسب ضرورت بنانے کی ایک مثال ہے ۔ ہم نے .col
پیڈنگ میں اضافہ کیا ہے .px-lg-5
، اس کا مقابلہ .mx-lg-n5
پیرنٹ پر کیا ہے .row
اور پھر .container
ریپر کو اس کے ساتھ ایڈجسٹ کیا ہے .px-lg-5
۔
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
قطار کے کالم
.row-cols-*
آپ کے مواد اور ترتیب کو بہترین انداز میں پیش کرنے والے کالموں کی تعداد کو تیزی سے سیٹ کرنے کے لیے ریسپانسیو کلاسز کا استعمال کریں ۔ جبکہ نارمل .col-*
کلاسز انفرادی کالموں پر لاگو ہوتی ہیں (مثال کے طور پر .col-md-4
)، قطار کے کالم کلاسز کو .row
شارٹ کٹ کے طور پر پیرنٹ پر سیٹ کیا جاتا ہے۔
بنیادی گرڈ لے آؤٹس کو تیزی سے بنانے یا اپنے کارڈ لے آؤٹ کو کنٹرول کرنے کے لیے ان قطار کالم کلاسز کا استعمال کریں۔
<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-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>
آپ اس کے ساتھ موجود 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);
}
}
سیدھ
کالموں کو عمودی اور افقی طور پر سیدھ میں کرنے کے لیے فلیکس باکس الائنمنٹ یوٹیلیٹیز استعمال کریں۔ انٹرنیٹ ایکسپلورر 10-11 فلیکس آئٹمز کی عمودی سیدھ میں تعاون نہیں کرتا ہے جب فلیکس کنٹینر میں min-height
نیچے دکھایا گیا ہے۔ مزید تفصیلات کے لیے Flexbugs #3 دیکھیں۔
عمودی سیدھ
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
افقی سیدھ
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
کوئی گٹر نہیں۔
ہماری پہلے سے طے شدہ گرڈ کلاسوں میں کالموں کے درمیان گٹر کو کے ساتھ ہٹایا جا سکتا ہے .no-gutters
۔ یہ تمام فوری بچوں کے کالموں سے منفی margin
s .row
اور افقی کو ہٹا دیتا ہے۔padding
ان طرزوں کو بنانے کے لیے سورس کوڈ یہ ہے۔ نوٹ کریں کہ کالم اوور رائیڈز کا دائرہ صرف بچوں کے پہلے کالموں تک ہوتا ہے اور ان کو انتساب سلیکٹر کے ذریعے نشانہ بنایا جاتا ہے ۔ اگرچہ یہ زیادہ مخصوص سلیکٹر تیار کرتا ہے، کالم پیڈنگ کو وقفہ کاری کی افادیت کے ساتھ مزید تخصیص کیا جا سکتا ہے ۔
ایک کنارے سے کنارے ڈیزائن کی ضرورت ہے؟ والدین کو چھوڑ دیں .container
یا .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
عملی طور پر، یہ کیسا لگتا ہے۔ نوٹ کریں کہ آپ اسے دیگر تمام پہلے سے طے شدہ گرڈ کلاسز کے ساتھ استعمال کرنا جاری رکھ سکتے ہیں (بشمول کالم کی چوڑائی، ریسپانسیو ٹائرز، ری آرڈرز اور مزید)۔
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
کالم لپیٹنا
اگر ایک قطار میں 12 سے زیادہ کالم رکھے جائیں تو اضافی کالموں کا ہر گروپ، ایک یونٹ کے طور پر، ایک نئی لائن پر لپیٹے گا۔
چونکہ 9 + 4 = 13 > 12، یہ 4 کالم وسیع div ایک متصل یونٹ کے طور پر ایک نئی لائن پر لپیٹ جاتا ہے۔
بعد کے کالم نئی لائن کے ساتھ جاری رہتے ہیں۔
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
کالم ٹوٹ جاتا ہے۔
فلیکس باکس میں کالموں کو نئی لائن میں توڑنے کے لیے ایک چھوٹی ہیک کی ضرورت ہوتی ہے: width: 100%
جہاں بھی آپ اپنے کالموں کو نئی لائن میں لپیٹنا چاہتے ہیں وہاں ایک عنصر شامل کریں۔ عام طور پر یہ ایک سے زیادہ .row
s کے ساتھ مکمل کیا جاتا ہے، لیکن عمل درآمد کا ہر طریقہ اس کا حساب نہیں دے سکتا۔
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
آپ اس وقفے کو ہماری ریسپانسیو ڈسپلے یوٹیلیٹیز کے ساتھ مخصوص بریک پوائنٹس پر بھی لگا سکتے ہیں ۔
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
دوبارہ ترتیب دینا
کلاسز کا آرڈر دیں۔
اپنے مواد کی بصری ترتیب.order-
کو کنٹرول کرنے کے لیے کلاسز کا استعمال کریں ۔ یہ کلاسز ریسپانسیو ہیں، لہذا آپ بریک پوائنٹ (مثلاً، ) سیٹ کر سکتے ہیں۔ تمام پانچ گرڈ ٹائرز کے لیے سپورٹ شامل ہے ۔order
.order-1.order-md-2
1
12
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
.order-first
جوابی اور .order-last
کلاسیں بھی ہیں جو بالترتیب اور ( ) لگا order
کر عنصر کو تبدیل کرتی ہیں۔ ان کلاسوں کو ضرورت کے مطابق نمبر والی کلاسوں کے ساتھ ملایا بھی جا سکتا ہے۔order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
کالمز کو آف سیٹ کرنا
آپ گرڈ کالم کو دو طریقوں سے آفسیٹ کر سکتے ہیں: ہماری ریسپانسیو .offset-
گرڈ کلاسز اور ہماری مارجن یوٹیلیٹیز ۔ گرڈ کلاسز کا سائز کالموں سے مماثل ہے جبکہ مارجنز فوری لے آؤٹ کے لیے زیادہ مفید ہیں جہاں آفسیٹ کی چوڑائی متغیر ہے۔
آفسیٹ کلاسز
.offset-md-*
کلاسز کا استعمال کرتے ہوئے کالموں کو دائیں طرف منتقل کریں ۔ یہ کلاسیں کالم کے بائیں مارجن کو *
کالموں کے حساب سے بڑھاتی ہیں۔ مثال کے طور پر، چار کالموں پر .offset-md-4
منتقل ہوتا ہے ۔.col-md-4
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
جوابی بریک پوائنٹس پر کالم صاف کرنے کے علاوہ، آپ کو آفسیٹس کو دوبارہ ترتیب دینے کی ضرورت پڑ سکتی ہے۔ گرڈ کی مثال میں اس کو عمل میں دیکھیں ۔
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
مارجن کی افادیت
v4 میں flexbox میں منتقل ہونے کے ساتھ، آپ مارجن یوٹیلیٹیز استعمال کر سکتے ہیں جیسے .mr-auto
بہن بھائیوں کے کالموں کو ایک دوسرے سے دور کرنا۔
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
گھونسلہ
اپنے مواد کو ڈیفالٹ گرڈ کے ساتھ نیسٹ کرنے کے لیے، موجودہ کالم کے اندر ایک نیا .row
اور کالموں کا سیٹ شامل کریں ۔ نیسٹڈ قطاروں میں کالموں کا ایک سیٹ شامل ہونا چاہئے جس میں 12 یا اس سے کم کا اضافہ ہوتا ہے (یہ ضروری نہیں ہے کہ آپ تمام 12 دستیاب کالم استعمال کریں)۔.col-sm-*
.col-sm-*
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .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: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
مکسنس
مکسینز کو گرڈ متغیر کے ساتھ مل کر استعمال کیا جاتا ہے تاکہ انفرادی گرڈ کالموں کے لیے سیمنٹک سی ایس ایس تیار کیا جا سکے۔
// 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();
@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: 30px !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
یا %
) میں سیٹ کریں۔