طريقه ڪار
Bootstrap ٺاھڻ ۽ برقرار رکڻ لاءِ استعمال ٿيندڙ ھدايت واري اصولن، حڪمت عملين ۽ ٽيڪنڪ جي باري ۾ سکو ته جيئن توھان ان کي وڌيڪ آساني سان ترتيب ڏئي سگھوٿا ۽ وڌائي سگھوٿا.
جڏهن ته شروع ٿيڻ وارا صفحا پروجيڪٽ جو هڪ تعارفي دورو مهيا ڪن ٿا ۽ اهو ڇا پيش ڪري ٿو، هي دستاويز ان ڳالهه تي ڌيان ڏئي ٿو ته اسان اهي شيون ڇو ڪندا آهيون جيڪي اسان 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-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 لکڻ کي ترجيح ڏين ٿا. عام طور تي، 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 گهرج ۾ حد کان وڌيڪ ڪتب آڻڻ کان پاسو ڪجي. ان ڪري، اسان پنھنجي سي ايس ايس چونڊيندڙن ۾ ھڪڙي ڪلاس تي ڌيان ڏيون ٿا ۽ فوري ٻارن جي چونڊ ڪندڙن کان بچڻ جي ڪوشش ڪريون ٿا ( >). اهو توهان کي توهان جي عمل درآمد ۾ وڌيڪ لچڪ ڏئي ٿو ۽ اسان جي CSS کي آسان ۽ گهٽ مخصوص رکڻ ۾ مدد ڪري ٿو.