یہ پوسٹ اس بات پر بحث کرے گی کہ گٹر کی جگہیں کیا ہیں اور انہیں بوٹسٹریپ میں کسی مخصوص ڈیو کے لیے کیسے ہٹایا جا سکتا ہے۔
بوٹسٹریپ میں گٹر اسپیس کیا ہے؟
گٹر افقی پیڈنگ کے ذریعہ کالموں کے درمیان خالی جگہیں یا خلاء ہیں۔ وہ بوٹسٹریپ گرڈ سسٹم میں جوابی مواد کی سیدھ اور خالی جگہوں کو سپورٹ کرنے کے لیے استعمال ہوتے ہیں۔
نیچے دی گئی تصویر ایک قطار دکھاتی ہے جس کے ارد گرد سرخ سرحد ہے۔ قطار کے اندر، مساوی گرڈ کالم کے تین برابر سائز والے div عناصر موجود ہیں۔ اگرچہ کالم برابر ہیں، پھر بھی ان کے درمیان گٹر کی جگہیں موجود ہیں:
بوٹسٹریپ میں مخصوص div کے لیے گٹر کی جگہ کو کیسے ہٹایا جائے؟
بوٹسٹریپ میں، کلاس ' بغیر گٹر کسی بھی div کے گٹر کی جگہوں کو ختم کرنے کے لیے استعمال کیا جاتا ہے۔
اس مقصد کے لیے:
- شامل کریں ' 'کلاس کے ساتھ ٹیگ' main-div '
- پھر، ایک اور 'کا اضافہ کرکے قطار کے حصے کو ایڈجسٹ کریں
'کلاس کے ساتھ عنصر' قطار ' جیسا کہ ہمیں قطار سے خالی جگہوں کو ہٹانا ہے، ایک کلاس کی وضاحت کریں ' بغیر گٹر 'اس کے اندر.- گرڈ قطار کو تین مساوی کالموں میں تقسیم کرنے کے لیے، کلاس کا استعمال کریں ' col-4 '
- ہر کالم کے '
' کنٹینر کے اندر، '' عناصر کو کلاسز کے ساتھ ایڈجسٹ کریں۔ کالم-1 '،' کالم 2 '، اور ' کالم 3 '، بالترتیب: < div کلاس = 'مین-ڈیو' >
< div کلاس = 'قطار نو گٹر' >
< div کلاس = 'col-4' >
< div کلاس = 'کالم -1' >< / div >
< / div >
< div کلاس = 'col-4' >
< div کلاس = 'کالم-2' >< / div >
< / div >
< div کلاس = 'col-4' >
< div کلاس = 'کالم 3' >< / div >
< / div >
< / div >
< / div >سی ایس ایس
سی ایس ایس سیکشن میں، HTML صفحہ میں مذکور کلاسز کو اسٹائل کی کئی خصوصیات کے ساتھ اسٹائل کیا گیا ہے۔
اسٹائل 'مین ڈیو' کلاس
.main-div {
چوڑائی : 600px;
مارجن: 50px آٹو؛
}' .main-div 'کلاس رکھنے والے div عنصر تک رسائی کے لئے ذکر کیا گیا ہے' main-div ' اس کلاس پر درج ذیل خصوصیات کا اطلاق ہوتا ہے:
- ' چوڑائی ' عنصر کی چوڑائی کی وضاحت کرتا ہے۔
- ' مارجن عنصر کے ارد گرد وقفہ کاری کا تعین کرتا ہے۔
طرز 'قطار' کلاس
صف {
سرحد : 1px ٹھوس سرخ؛
}بوٹسٹریپ ' قطار 'کلاس' کے ساتھ شامل کیا جاتا ہے سرحد ' جائیداد. یہ گرڈ قطار کو ایک مخصوص چوڑائی، انداز، اور رنگ کے بارڈر میں لپیٹ دے گا۔
تین طبقات ' کالم-1 '،' کالم 2 '، اور ' کالم 3 'سی ایس ایس کو تفویض کیا جاتا ہے' پس منظر کا رنگ 'اور' اونچائی انہیں نمایاں کرنے کے لیے خصوصیات۔
طرز 'کالم -1' کلاس
کالم- ایک {
پس منظر- رنگ : فیروزی
اونچائی : 200px;
}اسٹائل 'کالم -2' کلاس
کالم- 2 {
پس منظر- رنگ : بنفشی
اونچائی : 200px;
}طرز 'کالم -3' کلاس
کالم- 3 {
پس منظر- رنگ : پیلا سبز؛
اونچائی : 200px;
}یہ دیکھا جا سکتا ہے کہ '
'کلاس کے ساتھ کنٹینر' قطار ان کے درمیان گٹر کی جگہ کے بغیر کامیابی کے ساتھ ایڈجسٹ کیا گیا ہے:
ہم نے آپ کو سکھایا ہے کہ Bootstrap میں ایک مخصوص div کے لیے گٹر کی جگہ کو کیسے ہٹایا جائے۔
نتیجہ
ایک مخصوص div کے لیے گٹر کی جگہوں کو ہٹانے کے لیے، کلاس ' بغیر گٹر ' استعمال کیا جا سکتا ہے. اس مقصد کے لیے، شامل کریں '
'عنصر کے ساتھ' قطار بغیر گٹر 'کلاس. اس پوسٹ نے گٹر کی جگہوں کے بارے میں ایک جامع گائیڈ فراہم کیا ہے اور بوٹسٹریپ میں کسی مخصوص div کے لیے انہیں کیسے ختم کیا جا سکتا ہے۔ - پھر، ایک اور 'کا اضافہ کرکے قطار کے حصے کو ایڈجسٹ کریں