نقطہ نظر

بوٹسٹریپ کو بنانے اور برقرار رکھنے کے لیے استعمال کیے جانے والے رہنما اصولوں، حکمت عملیوں اور تکنیکوں کے بارے میں جانیں تاکہ آپ اسے آسانی سے اپنی مرضی کے مطابق بنا سکیں اور اسے بڑھا سکیں۔

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

کوئی ایسی چیز دیکھیں جو ٹھیک نہیں لگتی، یا شاید اس سے بہتر کیا جا سکتا ہے؟ ایک مسئلہ کھولیں — ہم آپ کے ساتھ اس پر بات کرنا پسند کریں گے۔

خلاصہ

ہم ان میں سے ہر ایک میں مزید غوطہ لگائیں گے، لیکن اعلیٰ سطح پر، یہ ہے جو ہمارے نقطہ نظر کی رہنمائی کرتا ہے۔

• اجزاء سب سے پہلے جوابدہ اور موبائل ہونے چاہئیں
• اجزاء کو بیس کلاس کے ساتھ بنایا جانا چاہئے اور ترمیم کرنے والے کلاسوں کے ذریعے بڑھایا جانا چاہئے۔
• اجزاء کی ریاستوں کو ایک عام z-index پیمانے کی پابندی کرنی چاہیے۔
• جب بھی ممکن ہو، JavaScript پر HTML اور CSS کے نفاذ کو ترجیح دیں۔
• جب بھی ممکن ہو، اپنی مرضی کے مطابق طرزوں پر یوٹیلیٹیز استعمال کریں۔
• جب بھی ممکن ہو، سخت HTML تقاضوں کو نافذ کرنے سے گریز کریں (بچوں کے انتخاب کنندگان)

جوابدہ

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

بوٹسٹریپ میں، آپ کو ہمارے میڈیا سوالات میں یہ سب سے واضح طور پر نظر آئے گا۔ زیادہ تر معاملات میں، ہم ایسے min-widthاستفسارات کا استعمال کرتے ہیں جو ایک مخصوص بریک پوائنٹ پر لاگو ہونے لگتے ہیں اور اعلیٰ بریک پوائنٹس کے ذریعے آگے بڑھتے ہیں۔ مثال کے طور پر، ایک .d-noneسے لاتعداد تک لاگو ہوتا min-width: 0ہے۔ دوسری طرف، .d-md-noneدرمیانے وقفے اور اوپر سے ایک کا اطلاق ہوتا ہے۔

بعض اوقات ہم استعمال کریں گے max-widthجب کسی جزو کی موروثی پیچیدگی کی ضرورت ہوتی ہے۔ بعض اوقات، یہ اوور رائڈز ہمارے اجزاء سے بنیادی فعالیت کو دوبارہ لکھنے کے بجائے عملی اور ذہنی طور پر نافذ کرنے اور سپورٹ کرنے کے لیے زیادہ واضح ہوتے ہیں۔ ہم اس نقطہ نظر کو محدود کرنے کی کوشش کرتے ہیں، لیکن اسے وقتاً فوقتاً استعمال کریں گے۔

کلاسز

ہمارے ریبوٹ کے علاوہ، ایک کراس براؤزر نارملائزیشن اسٹائل شیٹ، ہمارے تمام اسٹائل کا مقصد کلاسز کو بطور سلیکٹر استعمال کرنا ہے۔ اس کا مطلب ہے کہ قسم کے انتخاب کنندگان (مثلاً، input[type="text"]) اور بیرونی پیرنٹ کلاسز (مثلاً، .parent .child) سے واضح طور پر اسٹیئرنگ کرنا جو آسانی سے اوور رائڈ کرنے کے لیے اسٹائلز کو اتنا مخصوص بنا دیتے ہیں۔

اس طرح، اجزاء کو ایک بنیادی طبقے کے ساتھ بنایا جانا چاہیے جس میں مشترکہ، اوور رائڈ نہ ہونے والے پراپرٹی ویلیو کے جوڑے ہوں۔ مثال کے طور پر، .btnاور .btn-primary. ہم .btnتمام عام طرزوں کے لیے استعمال کرتے ہیں جیسے display, padding, and border-width. .btn-primaryاس کے بعد ہم رنگ، بیک گراؤنڈ کلر، بارڈر کلر وغیرہ شامل کرنے کے لیے ترمیم کار استعمال کرتے ہیں ۔

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

زیڈ انڈیکس اسکیلز

بوٹسٹریپ میں دو z-indexپیمانے ہیں — ایک جزو اور اوورلے اجزاء کے اندر عناصر۔

اجزاء کے عناصر

• بوٹسٹریپ میں کچھ اجزاء اوور لیپنگ عناصر کے ساتھ بنائے گئے ہیں تاکہ borderپراپرٹی میں ترمیم کیے بغیر ڈبل بارڈرز کو روکا جا سکے۔ مثال کے طور پر، بٹن گروپس، ان پٹ گروپس، اور صفحہ بندی۔
• یہ اجزاء ایک معیاری z-indexپیمانے کے 0ذریعے کا اشتراک کرتے ہیں 3۔
• 0ڈیفالٹ (ابتدائی) ہے، 1ہے :hover، 2ہے :active/ .active، اور 3ہے :focus۔
• یہ نقطہ نظر سب سے زیادہ صارف کی ترجیح کی ہماری توقعات سے میل کھاتا ہے۔ اگر کسی عنصر پر توجہ مرکوز کی جاتی ہے، تو یہ دیکھنے میں اور صارف کی توجہ میں ہے۔ فعال عناصر دوسرے نمبر پر ہیں کیونکہ وہ ریاست کی نشاندہی کرتے ہیں۔ ہوور تیسرے نمبر پر ہے کیونکہ یہ صارف کے ارادے کی نشاندہی کرتا ہے، لیکن تقریباً کسی بھی چیز کو ہوور کیا جا سکتا ہے۔

اوورلے اجزاء

بوٹسٹریپ میں کئی اجزاء شامل ہیں جو کسی قسم کے اوورلے کے طور پر کام کرتے ہیں۔ اس میں سب سے زیادہ z-index، ڈراپ ڈاؤن، فکسڈ اور اسٹیکی نیوبارز، موڈل، ٹول ٹپس، اور پاپ اوور شامل ہیں۔ ان اجزاء کا اپنا z-indexپیمانہ ہے جو کہ سے شروع ہوتا ہے 1000۔ یہ ابتدائی نمبر من مانی طور پر منتخب کیا گیا تھا اور یہ ہمارے اسٹائلز اور آپ کے پروجیکٹ کے حسب ضرورت اسٹائلز کے درمیان ایک چھوٹے بفر کے طور پر کام کرتا ہے۔

ہر اوورلے جزو اپنی z-indexقدر کو اس طرح سے تھوڑا سا بڑھاتا ہے کہ عام UI اصول صارف کے فوکسڈ یا ہوورڈ عناصر کو ہر وقت نظر میں رہنے کی اجازت دیتے ہیں۔ مثال کے طور پر، ایک موڈل دستاویز کو مسدود کر رہا ہے (مثال کے طور پر، آپ موڈل کی کارروائی کے علاوہ کوئی اور کارروائی نہیں کر سکتے ہیں)، لہذا ہم اسے اپنے navbars کے اوپر رکھتے ہیں۔

z-indexہمارے لے آؤٹ صفحہ میں اس کے بارے میں مزید جانیں ۔

جے ایس پر ایچ ٹی ایم ایل اور سی ایس ایس

جب بھی ممکن ہو، ہم جاوا اسکرپٹ پر HTML اور CSS لکھنے کو ترجیح دیتے ہیں۔ عام طور پر، HTML اور CSS تمام مختلف تجربہ کی سطحوں کے زیادہ لوگوں کے لیے زیادہ قابل اور قابل رسائی ہیں۔ HTML اور CSS آپ کے براؤزر میں JavaScript کے مقابلے میں بھی تیز ہیں، اور آپ کا براؤزر عام طور پر آپ کے لیے بہت زیادہ فعالیت فراہم کرتا ہے۔

یہ اصول ہماری dataصفات کا استعمال کرتے ہوئے پہلی قسم کا JavaScript API ہے۔ ہمارے جاوا اسکرپٹ پلگ ان استعمال کرنے کے لیے آپ کو تقریباً کوئی جاوا اسکرپٹ لکھنے کی ضرورت نہیں ہے۔ اس کے بجائے، HTML لکھیں۔ اس کے بارے میں ہمارے جاوا اسکرپٹ کے جائزہ صفحہ میں مزید پڑھیں ۔

آخر میں، ہماری طرزیں عام ویب عناصر کے بنیادی طرز عمل پر بنتی ہیں۔ جب بھی ممکن ہو، ہم اسے استعمال کرنے کو ترجیح دیتے ہیں جو براؤزر فراہم کرتا ہے۔ مثال کے طور پر، آپ .btnتقریبا کسی بھی عنصر پر کلاس لگا سکتے ہیں، لیکن زیادہ تر عناصر کوئی سیمنٹک قدر یا براؤزر کی فعالیت فراہم نہیں کرتے ہیں۔ تو اس کے بجائے، ہم <button>s اور <a>s استعمال کرتے ہیں۔

اسی طرح زیادہ پیچیدہ اجزاء کے لئے جاتا ہے. جب کہ ہم ان پٹ کی حالت کی بنیاد پر پیرنٹ عنصر میں کلاسز شامل کرنے کے لیے اپنا فارم کی توثیق پلگ ان لکھ سکتے ہیں:valid ، اس طرح ہمیں متن کو سرخ کہنے کا انداز دینے کی اجازت ملتی ہے، ہم ہر براؤزر کی طرف سے فراہم کردہ / :invalidچھدم عناصر کو استعمال کرنے کو ترجیح دیتے ہیں۔

افادیت

یوٹیلیٹی کلاسز — جو پہلے بوٹسٹریپ 3 میں مددگار تھے — CSS بلوٹ اور صفحہ کی خراب کارکردگی کا مقابلہ کرنے میں ایک طاقتور اتحادی ہیں۔ یوٹیلیٹی کلاس عام طور پر ایک واحد، غیر متغیر پراپرٹی ویلیو جوڑی کو بطور کلاس ظاہر کیا جاتا ہے (مثال کے طور پر، .d-blockنمائندگی کرتا display: block;ہے)۔ ان کی بنیادی اپیل HTML لکھنے کے دوران استعمال کی رفتار اور اپنی مرضی کے مطابق CSS کی مقدار کو محدود کرنا ہے جو آپ کو لکھنا ہے۔

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

لچکدار HTML

اگرچہ ہمیشہ ممکن نہیں ہوتا ہے، ہم اجزاء کے لیے اپنے HTML کے تقاضوں میں حد سے زیادہ کٹر پن سے بچنے کی کوشش کرتے ہیں۔ اس طرح، ہم اپنے CSS سلیکٹرز میں سنگل کلاسز پر توجہ مرکوز کرتے ہیں اور بچوں کے فوری سلیکٹرز ( >) سے بچنے کی کوشش کرتے ہیں۔ یہ آپ کو آپ کے نفاذ میں مزید لچک دیتا ہے اور ہماری CSS کو آسان اور کم مخصوص رکھنے میں مدد کرتا ہے۔

کوڈ کنونشنز

کوڈ گائیڈ (بوٹسٹریپ کے شریک تخلیق کار، @mdo سے) دستاویز کرتا ہے کہ ہم اپنے HTML اور CSS کو بوٹسٹریپ پر کیسے لکھتے ہیں۔ یہ عمومی فارمیٹنگ، کامن سینس ڈیفالٹس، پراپرٹی اور انتساب کے آرڈرز اور مزید کے لیے رہنما اصول بتاتا ہے۔

ہم اپنے Sass/CSS میں ان معیارات اور مزید کو نافذ کرنے کے لیے Stylelint کا استعمال کرتے ہیں۔ ہماری حسب ضرورت اسٹائلِنٹ کنفیگریشن اوپن سورس ہے اور دوسروں کے استعمال اور توسیع کے لیے دستیاب ہے۔

ہم معیاری اور سیمنٹک HTML کو نافذ کرنے کے ساتھ ساتھ عام غلطیوں کا پتہ لگانے کے لیے vnu-jar کا استعمال کرتے ہیں۔