بوٹسٹریپ

سہاروں ۔

بوٹسٹریپ ایک ذمہ دار 12 کالم گرڈ پر بنایا گیا ہے۔ ہم نے اس سسٹم کی بنیاد پر فکسڈ اور فلوڈ چوڑائی کے لے آؤٹ بھی شامل کیے ہیں۔

CSS ری سیٹ، نوع ٹائپ، اور لنکس کے لیے عالمی انداز

HTML5 doctype کی ضرورت ہے۔

بوٹسٹریپ HTML عناصر اور CSS خصوصیات کا استعمال کرتا ہے جو HTML5 doctype کے استعمال کی ضرورت ہوتی ہے۔ اسے اپنے پروجیکٹ میں ہر بوٹسٹریپ پیج کے شروع میں شامل کرنا یقینی بنائیں۔

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

نوع ٹائپ اور لنکس

scaffolding.less فائل کے اندر ، ہم بنیادی عالمی ڈسپلے، ٹائپوگرافی، اور لنک کے انداز ترتیب دیتے ہیں۔ خاص طور پر، ہم:

  • جسم پر مارجن کو ہٹا دیں۔
  • پر سیٹ کریں background-color: white;۔body
  • @baseFontFamilyہمارے نوع ٹائپ کی بنیاد کے طور پر ، @baseFontSize، اور @baseLineHeightصفات کا استعمال کریں۔
  • عالمی لنک کا رنگ بذریعہ سیٹ کریں @linkColorاور صرف پر لنک انڈر لائنز لگائیں۔:hover

نارملائز کے ذریعے ری سیٹ کریں۔

بوٹسٹریپ 2 کے مطابق، روایتی CSS ری سیٹ Normalize.css سے عناصر کو استعمال کرنے کے لیے تیار ہوا ہے، نکولس گیلاگھر کا ایک پروجیکٹ جو HTML5 بوائلر پلیٹ کو بھی طاقت دیتا ہے ۔

نیا ری سیٹ اب بھی reset.less میں پایا جا سکتا ہے ، لیکن اختصار اور درستگی کے لیے بہت سے عناصر کو ہٹا دیا گیا ہے۔

ایک ذمہ دار موڑ کے ساتھ پہلے سے طے شدہ گرڈ سسٹم 12 کالم

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

بوٹسٹریپ میں فراہم کردہ ڈیفالٹ گرڈ سسٹم 12 کالموں کا استعمال کرتا ہے جو 724px، 940px (بغیر جوابی CSS شامل کیے پہلے سے طے شدہ) اور 1170px کی چوڑائی پر پیش کرتے ہیں۔ 767px ویو پورٹ کے نیچے، کالم سیال بن جاتے ہیں اور عمودی طور پر اسٹیک ہوتے ہیں۔

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

جیسا کہ یہاں دکھایا گیا ہے، ایک بنیادی ترتیب دو "کالموں" کے ساتھ بنائی جا سکتی ہے، ہر ایک 12 بنیادی کالموں کی تعداد پر پھیلا ہوا ہے جسے ہم نے اپنے گرڈ سسٹم کے حصے کے طور پر بیان کیا ہے۔


کالمز کو آف سیٹ کرنا

4
4 آفسیٹ 4
3 آفسیٹ 3
3 آفسیٹ 3
8 آفسیٹ 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

نیسٹنگ کالم

بوٹسٹریپ میں جامد (غیر سیال) گرڈ سسٹم کے ساتھ، گھوںسلا بنانا آسان ہے۔ اپنے مواد کو نیسٹ کرنے کے لیے، کسی موجودہ کالم میں صرف ایک نیا .rowاور کالموں کا سیٹ شامل کریں ۔.span*.span*

مثال

نیسٹڈ قطاروں میں کالموں کا ایک سیٹ شامل ہونا چاہئے جو اس کے پیرنٹ کے کالموں کی تعداد میں اضافہ کرتا ہے۔ مثال کے طور پر، دو نیسٹڈ .span3کالم ایک کے اندر رکھے جانے چاہئیں .span6۔

کالم کا لیول 1
لیول 2
لیول 2 
  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     لیول 1 کالم
  4.     <div class = "row" > 
  5.       <div class = "span3" > لیول 2 </div> 
  6.       <div class = "span3" > لیول 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

سیال گرڈ سسٹم 12 ذمہ دار، فیصد پر مبنی کالم

سیال کالم

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

فیصد، پکسلز نہیں۔

فلوڈ گرڈ سسٹم فکسڈ پکسلز کے بجائے کالم کی چوڑائی کے لیے فیصد کا استعمال کرتا ہے۔ اس میں ہمارے فکسڈ گرڈ سسٹم کی طرح ہی جوابی تغیرات بھی ہیں، جو اسکرین کی کلیدی قراردادوں اور آلات کے لیے مناسب تناسب کو یقینی بناتا ہے۔

سیال قطاریں۔

.rowصرف میں تبدیل کرکے کسی بھی قطار کا سیال بنائیں .row-fluid۔ کالم بالکل یکساں رہتے ہیں، جس سے فکسڈ اور فلوئڈ لے آؤٹ کے درمیان پلٹنا انتہائی آسان ہوتا ہے۔

مارک اپ

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

سیال گھونسلہ

فلوئڈ گرڈز کے ساتھ نیسٹنگ تھوڑا مختلف ہے: نیسٹڈ کالمز کی تعداد کا پیرنٹ سے مماثل ہونا ضروری نہیں ہے۔ اس کے بجائے، آپ کے کالم ہر سطح پر دوبارہ ترتیب دیئے جاتے ہیں کیونکہ ہر قطار پیرنٹ کالم کا 100% حصہ لیتی ہے۔

سیال 12
سیال 6
سیال 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     کالم کا لیول 1
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > لیول 2 </div> 
  6.       <div class = "span6" > لیول 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

گرڈ حسب ضرورت

متغیر پہلے سے طے شدہ قیمت تفصیل
@gridColumns 12 کالموں کی تعداد
@gridColumnWidth 60px ہر کالم کی چوڑائی
@gridGutterWidth 20px کالموں کے درمیان منفی جگہ

کم میں متغیر

بوٹسٹریپ میں بنایا گیا ڈیفالٹ 940px گرڈ سسٹم کو اپنی مرضی کے مطابق بنانے کے لیے مٹھی بھر متغیرات ہیں، جو اوپر درج ہیں۔ گرڈ کے تمام متغیرات variables.less میں محفوظ ہیں۔

کس طرح اپنی مرضی کے مطابق کرنے کے لئے

گرڈ میں ترمیم کرنے کا مطلب تین @grid*متغیرات کو تبدیل کرنا اور بوٹسٹریپ کو دوبارہ مرتب کرنا ہے۔ variables.less میں گرڈ متغیرات کو تبدیل کریں اور دوبارہ مرتب کرنے کے لیے دستاویز کردہ چار طریقوں میں سے ایک استعمال کریں ۔ اگر آپ مزید کالم شامل کر رہے ہیں تو grid.less میں ان لوگوں کے لیے CSS ضرور شامل کریں۔

جوابدہ رہنا

گرڈ کی حسب ضرورت صرف ڈیفالٹ سطح، 940px گرڈ پر کام کرتی ہے۔ بوٹسٹریپ کے ریسپانسیو پہلوؤں کو برقرار رکھنے کے لیے، آپ کو گرڈز کو ریسپانسیو.لیس میں بھی اپنی مرضی کے مطابق بنانا ہوگا۔

ویب صفحات بنانے کے لیے لے آؤٹ بنیادی ٹیمپلیٹس

فکسڈ لے آؤٹ

پہلے سے طے شدہ اور سادہ 940px چوڑا، کسی بھی ویب سائٹ یا صفحہ کے لیے مرکزی ترتیب جو کسی ایک کے ذریعے فراہم کی گئی ہے <div class="container">۔

  1. <body>
  2.   <div class = "کنٹینر" > 
  3.     ...
  4.   </div>
  5. </body>

سیال لے آؤٹ

<div class="container-fluid">لچکدار صفحہ کی ساخت، کم سے کم اور زیادہ سے زیادہ چوڑائی، اور بائیں ہاتھ کی سائڈبار دیتا ہے۔ یہ ایپس اور دستاویزات کے لیے بہت اچھا ہے۔

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--سائیڈبار مواد-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--جسمانی مواد-->
  8.     </div>
  9.   </div>
  10. </div>

مختلف آلات اور قراردادوں کے لیے ذمہ دار ڈیزائن میڈیا کے سوالات

ذمہ دار آلات

وہ کیا کرتے ہیں

میڈیا کے استفسارات متعدد شرائط کی بنیاد پر حسب ضرورت CSS کی اجازت دیتے ہیں — تناسب، چوڑائی، ڈسپلے کی قسم، وغیرہ — لیکن عام طور پر اس کے ارد گرد min-widthاور max-width.

  • ہمارے گرڈ میں کالم کی چوڑائی میں ترمیم کریں۔
  • جہاں ضروری ہو وہاں فلوٹ کے بجائے عناصر کو اسٹیک کریں۔
  • آلات کے لیے زیادہ موزوں ہونے کے لیے سرخیوں اور متن کا سائز تبدیل کریں۔

میڈیا کے سوالات کو ذمہ داری کے ساتھ استعمال کریں اور صرف اپنے موبائل سامعین کے لیے آغاز کے طور پر۔ بڑے پروجیکٹس کے لیے، وقف شدہ کوڈ بیسز پر غور کریں نہ کہ میڈیا کے سوالات کی تہوں پر۔

معاون آلات

بوٹسٹریپ ایک فائل میں مٹھی بھر میڈیا سوالات کو سپورٹ کرتا ہے تاکہ آپ کے پروجیکٹس کو مختلف ڈیوائسز اور اسکرین ریزولوشنز پر زیادہ مناسب بنانے میں مدد ملے۔ یہاں کیا شامل ہے:

لیبل لے آؤٹ کی چوڑائی کالم کی چوڑائی گٹر کی چوڑائی
اسمارٹ فونز 480px اور نیچے سیال کالم، کوئی مقررہ چوڑائی نہیں۔
اسمارٹ فونز سے گولیاں 767px اور نیچے سیال کالم، کوئی مقررہ چوڑائی نہیں۔
پورٹریٹ گولیاں 768px اور اس سے اوپر 42px 20px
طے شدہ 980px اور اس سے اوپر 60px 20px
بڑا ڈسپلے 1200px اور اوپر 70px 30px

میٹا ٹیگ کی ضرورت ہے۔

اس بات کو یقینی بنانے کے لیے کہ آلات جوابی صفحات کو صحیح طریقے سے ڈسپلے کریں، ویو پورٹ میٹا ٹیگ شامل کریں۔

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

میڈیا کے سوالات کا استعمال کرتے ہوئے

بوٹسٹریپ خود بخود میڈیا کے ان سوالات کو شامل نہیں کرتا ہے، لیکن ان کو سمجھنا اور شامل کرنا بہت آسان ہے اور اس کے لیے کم سے کم سیٹ اپ کی ضرورت ہوتی ہے۔ بوٹسٹریپ کی ذمہ دار خصوصیات کو شامل کرنے کے لیے آپ کے پاس کچھ اختیارات ہیں:

  1. مرتب کردہ ذمہ دار ورژن، bootstrap-responsive.css استعمال کریں۔
  2. @import "responsive.less" شامل کریں اور بوٹسٹریپ کو دوبارہ مرتب کریں۔
  3. ایک علیحدہ فائل کے طور پر responsive.less میں ترمیم اور دوبارہ مرتب کریں۔

کیوں نہ صرف اسے شامل کریں؟ سچ کہا جائے، ضروری نہیں کہ ہر چیز جوابدہ ہو۔ اس خصوصیت کو ہٹانے کے لیے ڈویلپرز کی حوصلہ افزائی کرنے کے بجائے، ہم اسے فعال کرنا بہتر سمجھتے ہیں۔

  1.   /* لینڈ اسکیپ فونز اور نیچے */
  2.   @media ( زیادہ سے زیادہ چوڑائی : 480px ) { ... }     
  3.  
  4.   /* لینڈ اسکیپ فون سے پورٹریٹ ٹیبلیٹ */
  5.   @media ( زیادہ سے زیادہ چوڑائی : 767px ) { ... }     
  6.  
  7.   /* لینڈ اسکیپ اور ڈیسک ٹاپ کے لیے پورٹریٹ ٹیبلیٹ */
  8.   @media ( کم سے کم چوڑائی : 768px ) اور ( زیادہ سے زیادہ چوڑائی : 979px ) { ... }        
  9.  
  10.   /* بڑا ڈیسک ٹاپ */
  11.   @media ( کم سے کم چوڑائی : 1200px ) { ... }

ذمہ دار یوٹیلیٹی کلاسز

وہ کیا ہیں

تیز رفتار موبائل دوستانہ ترقی کے لیے، آلہ کے ذریعے مواد دکھانے اور چھپانے کے لیے ان بنیادی یوٹیلیٹی کلاسز کا استعمال کریں۔

کب استعمال کرنا ہے۔

محدود بنیادوں پر استعمال کریں اور ایک ہی سائٹ کے بالکل مختلف ورژن بنانے سے گریز کریں۔ اس کے بجائے، ہر آلے کی پیشکش کو مکمل کرنے کے لیے ان کا استعمال کریں۔

مثال کے طور پر، آپ <select>موبائل لے آؤٹ پر nav کے لیے عنصر دکھا سکتے ہیں، لیکن ٹیبلیٹ یا ڈیسک ٹاپس پر نہیں۔

سپورٹ کلاسز

یہاں ان کلاسوں کا ٹیبل دکھایا گیا ہے جن کی ہم حمایت کرتے ہیں اور میڈیا کے دیے گئے استفسار کے لے آؤٹ پر ان کا اثر (آلہ کے ذریعہ لیبل لگا ہوا)۔ وہ میں پایا جا سکتا ہے responsive.less.

کلاس فونز480px اور نیچے گولیاں767px اور نیچے ڈیسک ٹاپس768px اور اس سے اوپر
.visible-phone نظر آنے والا
.visible-tablet نظر آنے والا
.visible-desktop نظر آنے والا
.hidden-phone نظر آنے والا نظر آنے والا
.hidden-tablet نظر آنے والا نظر آنے والا
.hidden-desktop نظر آنے والا نظر آنے والا

ٹیسٹ کیس

مندرجہ بالا کلاسز کو جانچنے کے لیے اپنے براؤزر کا سائز تبدیل کریں یا مختلف ڈیوائسز پر لوڈ کریں۔

پر مرئی...

سبز چیک مارکس بتاتے ہیں کہ کلاس آپ کے موجودہ ویو پورٹ میں نظر آتی ہے۔

  • فون✔ فون
  • گولی✔ ٹیبلیٹ
  • ڈیسک ٹاپ✔ ڈیسک ٹاپ

پر پوشیدہ...

یہاں، سبز چیک مارکس بتاتے ہیں کہ کلاس آپ کے موجودہ ویو پورٹ میں پوشیدہ ہے۔

  • فون✔ فون
  • گولی✔ ٹیبلیٹ
  • ڈیسک ٹاپ✔ ڈیسک ٹاپ