بوٹسٹریپ ایک ذمہ دار 12 کالم گرڈ پر بنایا گیا ہے۔ ہم نے اس سسٹم کی بنیاد پر فکسڈ اور فلوڈ چوڑائی کے لے آؤٹ بھی شامل کیے ہیں۔
بوٹسٹریپ کے حصے کے طور پر فراہم کردہ ڈیفالٹ گرڈ سسٹم ایک 940px چوڑا، 12 کالم گرڈ ہے۔
اس میں مختلف ڈیوائسز اور ریزولوشنز کے لیے چار جوابی تغیرات بھی ہیں: فون، ٹیبلٹ پورٹریٹ، ٹیبل لینڈ اسکیپ اور چھوٹے ڈیسک ٹاپس، اور بڑے وائڈ اسکرین ڈیسک ٹاپس۔
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
جیسا کہ یہاں دکھایا گیا ہے، ایک بنیادی ترتیب دو "کالموں" کے ساتھ بنائی جا سکتی ہے، ہر ایک 12 بنیادی کالموں کی تعداد پر پھیلا ہوا ہے جسے ہم نے اپنے گرڈ سسٹم کے حصے کے طور پر بیان کیا ہے۔
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
بوٹسٹریپ میں جامد (غیر سیال) گرڈ سسٹم کے ساتھ، گھوںسلا بنانا آسان ہے۔ اپنے مواد کو نیسٹ کرنے کے لیے، کسی موجودہ کالم میں صرف ایک نیا .row
اور کالموں کا سیٹ شامل کریں ۔.span*
.span*
نیسٹڈ قطاروں میں کالموں کا ایک سیٹ شامل ہونا چاہئے جو اس کے پیرنٹ کے کالموں کی تعداد میں اضافہ کرتا ہے۔ مثال کے طور پر، دو نیسٹڈ .span3
کالم ایک کے اندر رکھے جانے چاہئیں .span6
۔
- <div class = "row" >
- <div class = "span12" >
- کالم کا لیول 1
- <div class = "row" >
- <div class = "span6" > لیول 2 </div>
- <div class = "span6" > لیول 2 </div>
- </div>
- </div>
- </div>
فلوڈ گرڈ سسٹم فکسڈ پکسلز کے بجائے کالم کی چوڑائی کے لیے فیصد کا استعمال کرتا ہے۔ اس میں ہمارے فکسڈ گرڈ سسٹم کی طرح ہی جوابی تغیرات بھی ہیں، جو اسکرین کی کلیدی قراردادوں اور آلات کے لیے مناسب تناسب کو یقینی بناتا ہے۔
.row
صرف میں تبدیل کرکے کسی بھی قطار کا سیال بنائیں .row-fluid
۔ کالم بالکل یکساں رہتے ہیں، جس سے فکسڈ اور فلوئڈ لے آؤٹ کے درمیان پلٹنا انتہائی آسان ہوتا ہے۔
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
فلوئڈ گرڈز کے ساتھ نیسٹنگ تھوڑا مختلف ہے: نیسٹڈ کالمز کی تعداد کا پیرنٹ سے مماثل ہونا ضروری نہیں ہے۔ اس کے بجائے، آپ کے کالم ہر سطح پر دوبارہ ترتیب دیئے جاتے ہیں کیونکہ ہر قطار پیرنٹ کالم کا 100% حصہ لیتی ہے۔
- <div class = "row-fluid" >
- <div class = "span12" >
- کالم کا لیول 1
- <div class = "row-fluid" >
- <div class = "span6" > لیول 2 </div>
- <div class = "span6" > لیول 2 </div>
- </div>
- </div>
- </div>
متغیر | پہلے سے طے شدہ قیمت | تفصیل |
---|---|---|
@gridColumns |
12 | کالموں کی تعداد |
@gridColumnWidth |
60px | ہر کالم کی چوڑائی |
@gridGutterWidth |
20px | کالموں کے درمیان منفی جگہ |
@siteWidth |
تمام کالموں اور گٹروں کا حسابی مجموعہ | .container-fixed() مکسین کی چوڑائی سیٹ کرنے کے لیے کالموں اور گٹروں کی تعداد کو شمار کرتا ہے۔ |
بوٹسٹریپ میں بلٹ ان ڈیفالٹ 940px گرڈ سسٹم کو حسب ضرورت بنانے کے لیے مٹھی بھر متغیرات ہیں، جو اوپر درج ہیں۔ گرڈ کے تمام متغیرات variables.less میں محفوظ ہیں۔
گرڈ میں ترمیم کرنے کا مطلب تین @grid*
متغیرات کو تبدیل کرنا اور بوٹسٹریپ کو دوبارہ مرتب کرنا ہے۔ variables.less میں گرڈ متغیرات کو تبدیل کریں اور دوبارہ مرتب کرنے کے لیے دستاویز کردہ چار طریقوں میں سے ایک استعمال کریں ۔ اگر آپ مزید کالم شامل کر رہے ہیں تو grid.less میں ان لوگوں کے لیے CSS ضرور شامل کریں۔
گرڈ کی حسب ضرورت صرف ڈیفالٹ سطح، 940px گرڈ پر کام کرتی ہے۔ بوٹسٹریپ کے ریسپانسیو پہلوؤں کو برقرار رکھنے کے لیے، آپ کو گرڈز کو ریسپانسیو.لیس میں بھی اپنی مرضی کے مطابق بنانا ہوگا۔
پہلے سے طے شدہ اور سادہ 940px چوڑا، کسی بھی ویب سائٹ یا صفحہ کے لیے مرکزی ترتیب جو کسی ایک کے ذریعے فراہم کی گئی ہے <div class="container">
۔
- <body>
- <div class = "کنٹینر" >
- ...
- </div>
- </body>
<div class="container-fluid">
لچکدار صفحہ کا ڈھانچہ، کم سے کم اور زیادہ سے زیادہ چوڑائی، اور بائیں ہاتھ کی سائڈبار دیتا ہے۔ یہ ایپس اور دستاویزات کے لیے بہت اچھا ہے۔
- <div class = "container-fluid" >
- <div class = "row-fluid" >
- <div class = "span2" >
- <!--سائیڈبار مواد-->
- </div>
- <div class = "span10" >
- <!--جسمانی مواد-->
- </div>
- </div>
- </div>
بوٹسٹریپ ایک فائل میں مٹھی بھر میڈیا سوالات کو سپورٹ کرتا ہے تاکہ آپ کے پروجیکٹس کو مختلف ڈیوائسز اور اسکرین ریزولوشنز پر زیادہ مناسب بنانے میں مدد ملے۔ یہاں کیا شامل ہے:
لیبل | لے آؤٹ کی چوڑائی | کالم کی چوڑائی | گٹر کی چوڑائی |
---|---|---|---|
اسمارٹ فونز | 480px اور نیچے | سیال کالم، کوئی مقررہ چوڑائی نہیں۔ | |
پورٹریٹ گولیاں | 480px سے 768px تک | سیال کالم، کوئی مقررہ چوڑائی نہیں۔ | |
زمین کی تزئین کی گولیاں | 768px سے 979px تک | 42px | 20px |
طے شدہ | 980px اور اس سے اوپر | 60px | 20px |
بڑا ڈسپلے | 1210px اور اس سے اوپر | 70px | 30px |
اس بات کو یقینی بنانے کے لیے کہ آلات جوابی صفحات کو صحیح طریقے سے ڈسپلے کریں، ویو پورٹ میٹا ٹیگ شامل کریں۔
- <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
میڈیا کے استفسارات متعدد شرائط کی بنیاد پر حسب ضرورت CSS کی اجازت دیتے ہیں — تناسب، چوڑائی، ڈسپلے کی قسم، وغیرہ — لیکن عام طور پر اس کے ارد گرد min-width
اور max-width
.
بوٹسٹریپ خود بخود میڈیا کے ان سوالات کو شامل نہیں کرتا ہے، لیکن ان کو سمجھنا اور شامل کرنا بہت آسان ہے اور اس کے لیے کم سے کم سیٹ اپ کی ضرورت ہوتی ہے۔ بوٹسٹریپ کی ذمہ دار خصوصیات کو شامل کرنے کے لیے آپ کے پاس چند اختیارات ہیں:
کیوں نہ صرف اسے شامل کریں؟ سچ کہا جائے، ضروری نہیں کہ ہر چیز جوابدہ ہو۔ اس خصوصیت کو ہٹانے کے لیے ڈویلپرز کی حوصلہ افزائی کرنے کے بجائے، ہم اسے فعال کرنا بہتر سمجھتے ہیں۔
- // لینڈ اسکیپ فونز اور نیچے
- @media ( زیادہ سے زیادہ چوڑائی : 480px ) { ... }
- // لینڈ اسکیپ فون سے پورٹریٹ ٹیبلٹ
- @media ( زیادہ سے زیادہ چوڑائی : 768px ) { ... }
- // لینڈ اسکیپ اور ڈیسک ٹاپ پر پورٹریٹ ٹیبلٹ
- @media ( کم سے کم چوڑائی : 768px ) اور ( زیادہ سے زیادہ چوڑائی : 980px ) { ... }
- // بڑا ڈیسک ٹاپ
- @media ( کم سے کم چوڑائی : 1200px ) { .. }