طريقه ڪار

جڏهن ته شروع ٿيڻ وارا صفحا پروجيڪٽ جو هڪ تعارفي دورو مهيا ڪن ٿا ۽ اهو ڇا پيش ڪري ٿو، هي دستاويز ان ڳالهه تي ڌيان ڏئي ٿو ته اسان اهي شيون ڇو ڪندا آهيون جيڪي اسان Bootstrap ۾ ڪندا آهيون. اهو ويب تي تعمير ڪرڻ لاءِ اسان جي فلسفي کي بيان ڪري ٿو ته جيئن ٻيا اسان کان سکن، اسان سان تعاون ڪري، ۽ اسان کي بهتر بنائڻ ۾ مدد ڪن.

ڪجھھ ڏسو جيڪو صحيح نٿو لڳي، يا شايد بھتر ٿي سگھي ٿو؟ هڪ مسئلو کوليو - اسان ان تي توهان سان بحث ڪرڻ چاهيندا.

خلاصو

اسان انهن مان هر هڪ ۾ وڌيڪ ڳولهينداسين، پر هڪ اعلي سطح تي، هتي اهو آهي جيڪو اسان جي طريقي جي رهنمائي ڪري ٿو.

• اجزاء کي جواب ڏيڻ گهرجي ۽ موبائل-پهرين
• اجزاء کي بنيادي طبقي سان تعمير ڪيو وڃي ۽ تبديل ڪندڙ طبقن ذريعي وڌايو وڃي
• جزو رياستن کي عام ز-انڊيڪس اسڪيل جي فرمانبرداري ڪرڻ گهرجي
• جڏهن به ممڪن هجي، ترجيح ڏيو HTML ۽ CSS لاڳو ڪرڻ جاوا اسڪرپٽ تي
• جڏهن به ممڪن هجي، استعمال ڪريو يوٽيلٽيز کي ڪسٽم طرزن تي
• جڏهن به ممڪن هجي، سخت HTML گهرجن کي لاڳو ڪرڻ کان پاسو ڪريو (ٻارن جي چونڊ ڪندڙ)

جوابدار

Bootstrap جي جوابي انداز کي جواب ڏيڻ لاءِ ٺاهيو ويو آهي، هڪ اهڙو طريقو جنهن کي اڪثر موبائيل-پهرين سڏيو ويندو آهي . اسان هي اصطلاح استعمال ڪريون ٿا اسان جي دستاويزن ۾ ۽ گهڻو ڪري ان سان متفق آهيون، پر ڪڏهن ڪڏهن اهو تمام وسيع ٿي سگهي ٿو. جڏهن ته هر جزو بوٽ اسٽريپ ۾ مڪمل طور تي جوابده نه هجڻ گهرجي ، هي جوابي انداز CSS اوور رائڊز کي گهٽائڻ بابت آهي توهان کي اسٽائل شامل ڪرڻ لاءِ زور ڏيڻ سان جيئن ويوپورٽ وڏو ٿي وڃي.

Bootstrap تي، توهان هن کي اسان جي ميڊيا سوالن ۾ تمام واضح طور تي ڏسندا. اڪثر صورتن ۾، اسان 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رنگ، پس منظر-رنگ، بارڊر-رنگ، وغيره شامل ڪرڻ لاءِ.

Modifier طبقن کي صرف استعمال ڪيو وڃي ٿو جڏهن ڪيترن ئي ملڪيتن يا قدرن کي ڪيترن ئي مختلف قسمن ۾ تبديل ڪيو وڃي. تبديل ڪندڙ هميشه ضروري نه هوندا آهن، تنهن ڪري پڪ ڪريو ته توهان اصل ۾ ڪوڊ جون لائينون محفوظ ڪري رهيا آهيو ۽ انهن کي ٺاهڻ دوران غير ضروري اوور رائڊس کي روڪي رهيا آهيو. سڌارن جا سٺا مثال اسان جا موضوع رنگ طبقن ۽ سائيز جي مختلف قسمن جا آهن.

z-انڊيڪس اسڪيل

بوٽ اسٽريپ ۾ ٻه z-indexاسڪيل آهن - عنصرن جي اندر هڪ جزو ۽ اوورلي اجزاء.

اجزاء جا عنصر

• بوٽ اسٽريپ ۾ ڪجھ اجزاء اوورليپنگ عناصر سان ٺاھيا ويا آھن borderملڪيت کي تبديل ڪرڻ کان سواءِ ٻٽي سرحدن کي روڪڻ لاءِ. مثال طور، بٽڻ گروپ، ان پٽ گروپ، ۽ صفحو.
• اهي حصا هڪ معياري z-indexپيماني تي شيئر ڪري 0رهيا 3آهن.
• 0ڊفالٽ آهي (ابتدائي)، 1آهي :hover، 2آهي :active/ .active، ۽ 3آهي :focus.
• اهو طريقو اسان جي اميدن سان ملندو آهي اعلي صارف جي ترجيحن جي. جيڪڏهن هڪ عنصر مرڪوز آهي، اهو ڏسڻ ۾ آهي ۽ صارف جي توجه تي. فعال عناصر ٻئي نمبر تي آهن ڇو ته اهي رياست کي ظاهر ڪن ٿا. هور ٽيون نمبر وڏو آهي ڇاڪاڻ ته اهو صارف جي ارادي کي ظاهر ڪري ٿو، پر تقريبا ڪجهه به ٿي سگهي ٿو.

اوورلي اجزاء

بوٽ اسٽريپ ۾ ڪيترائي حصا شامل آھن جيڪي ڪم ڪن ٿا ھڪڙي قسم جي اوورلي طور. ھن ۾ شامل آھي، سڀ کان وڌيڪ z-index، ڊراپ ڊائونز، فڪسڊ ۽ اسٽڪي نيوبارز، ماڊلز، ٽول ٽائپس، ۽ پاپ اوور جي ترتيب ۾. انهن حصن جو پنهنجو z-indexپيمانو آهي جيڪو شروع ٿئي ٿو 1000. هي شروعاتي نمبر پاڻمرادو چونڊيو ويو آهي ۽ اسان جي طرزن ۽ توهان جي پروجيڪٽ جي ڪسٽم اسلوب جي وچ ۾ هڪ ننڍڙي بفر طور ڪم ڪري ٿو.

هر اوورلي جزو ان جي z-indexقدر کي ٿورڙي وڌائي ٿو اهڙي طرح ته عام UI اصولن کي اجازت ڏين ٿا صارف مرکوز يا هوور ٿيل عناصر کي هر وقت ڏسڻ ۾. مثال طور، هڪ ماڊل دستاويز کي بلاڪ ڪرڻ آهي (مثال طور، توهان ماڊل جي عمل لاءِ سواءِ ٻيو ڪو به عمل نه ٿا ڪري سگهو)، تنهنڪري اسان ان کي پنهنجي نيوبارز جي مٿان رکون ٿا.

z-indexاسان جي ترتيب واري صفحي ۾ ان بابت وڌيڪ ڄاڻو .

HTML ۽ CSS تي JS

جڏهن به ممڪن هجي، اسان جاوا اسڪرپٽ تي HTML ۽ CSS لکڻ کي ترجيح ڏين ٿا. عام طور تي، HTML ۽ CSS تمام مختلف تجربن جي سطحن جي وڌيڪ ماڻهن لاءِ وڌيڪ وسيع ۽ پهچ وارا آهن. HTML ۽ CSS توهان جي برائوزر ۾ جاوا اسڪرپٽ جي ڀيٽ ۾ وڌيڪ تيز آهن، ۽ توهان جو برائوزر عام طور تي توهان لاءِ وڏي ڪارڪردگي فراهم ڪري ٿو.

ھي اصول آھي اسان جي فرسٽ ڪلاس جاوا اسڪرپٽ API dataخاصيتون استعمال ڪندي. اسان جا جاوا اسڪرپٽ پلگ ان استعمال ڪرڻ لاءِ توهان کي تقريباً ڪا به جاوا اسڪرپٽ لکڻ جي ضرورت ناهي؛ ان جي بدران، HTML لکو. ان بابت وڌيڪ پڙهو اسان جي جاوا اسڪرپٽ جي نظرثاني واري صفحي ۾ .

آخرڪار، اسان جا انداز عام ويب عناصر جي بنيادي رويي تي تعمير ڪن ٿا. جڏهن به ممڪن هجي، اسان اهو استعمال ڪرڻ چاهيون ٿا جيڪو برائوزر مهيا ڪري ٿو. مثال طور، توهان .btnتقريبا ڪنهن به عنصر تي هڪ ڪلاس رکي سگهو ٿا، پر اڪثر عناصر ڪنهن به لفظي قدر يا برائوزر ڪارڪردگي مهيا نه ڪندا آهن. ان جي بدران، اسان استعمال ڪريون ٿا <button>s ۽ <a>s.

ساڳيو ئي وڌيڪ پيچيده اجزاء لاء آهي. جڏهن ته اسان پنهنجي فارم جي تصديق واري پلگ ان کي ان پٽ جي حالت جي بنياد تي والدين عنصر ۾ ڪلاس شامل ڪرڻ لاءِ لکي سگهون ٿا، ان ڪري اسان کي ٽيڪسٽ کي ڳاڙهي انداز ۾ انداز ڪ��ڻ جي اجازت ڏئي ٿي، اسان استعمال ڪرڻ کي ترجيح ڏيون ٿا :valid/ :invalidpseudo-elements هر برائوزر اسان کي فراهم ڪري ٿو.

افاديت

يوٽيلٽي ڪلاس- اڳوڻو مددگار Bootstrap 3 ۾- سي ايس ايس بلوٽ ۽ خراب صفحي جي ڪارڪردگي کي منهن ڏيڻ ۾ هڪ طاقتور اتحادي آهن. هڪ يوٽيلٽي ڪلاس عام طور تي هڪ واحد، ناقابل قابل ملڪيت-قدر جوڙو آهي جيڪو هڪ طبقي جي طور تي ظاهر ڪيو ويو آهي (مثال طور، .d-blockنمائندگي ڪري ٿو display: block;). انهن جي بنيادي اپيل HTML لکڻ دوران استعمال جي رفتار آهي ۽ ڪسٽم CSS جي مقدار کي محدود ڪندي توهان کي لکڻو آهي.

خاص طور تي ڪسٽم CSS جي حوالي سان، افاديتون توهان جي عام طور تي بار بار پراپرٽي-ويليو جوڑوں کي اڪيلو طبقن ۾ گھٽائڻ سان فائل سائيز کي وڌائڻ ۾ مدد ڪري سگھن ٿيون. اهو توهان جي منصوبن ۾ پيماني تي هڪ ڊرامي اثر ٿي سگهي ٿو.

لچڪدار HTML

جڏهن ته هميشه ممڪن ناهي، اسان ڪوشش ڪريون ٿا ته اجزا لاءِ اسان جي HTML گهرج ۾ حد کان وڌيڪ ڪتب آڻڻ کان پاسو ڪجي. ان ڪري، اسان پنھنجي سي ايس ايس چونڊيندڙن ۾ ھڪڙي ڪلاس تي ڌيان ڏيون ٿا ۽ فوري ٻارن جي چونڊ ڪندڙن کان بچڻ جي ڪوشش ڪريون ٿا ( >). اهو توهان کي توهان جي عمل درآمد ۾ وڌيڪ لچڪ ڏئي ٿو ۽ اسان جي CSS کي آسان ۽ گهٽ مخصوص رکڻ ۾ مدد ڪري ٿو.

ڪوڊ ڪنوينشن

ڪوڊ گائيڊ (Bootstrap co-creator، @mdo کان) دستاويز ڏيکاري ٿو ته ڪيئن اسان پنهنجي HTML ۽ CSS کي Bootstrap تي لکون ٿا. اهو عام فارميٽنگ، عام احساس ڊفالٽ، ملڪيت ۽ منسوب آرڊر، ۽ وڌيڪ لاء هدايتون بيان ڪري ٿو.

اسان استعمال ڪريون ٿا Stylelint انهن معيارن کي لاڳو ڪرڻ لاءِ ۽ وڌيڪ اسان جي Sass/CSS ۾. اسان جي ڪسٽم اسٽائلليٽ ترتيب کليل ذريعو آهي ۽ ٻين لاء استعمال ڪرڻ ۽ وڌائڻ لاء دستياب آهي.

اسان استعمال ڪريون ٿا vnu-jar معياري ۽ لفظي HTML کي لاڳو ڪرڻ لاءِ، گڏوگڏ عام غلطين کي ڳولڻ لاءِ.