اوزار ٺاھيو
سکو ته Bootstrap جي شامل ڪيل npm اسڪرپٽ کي ڪيئن استعمال ڪجي اسان جي ڊاڪيومينٽيشن ٺاهڻ، ماخذ ڪوڊ گڏ ڪرڻ، ٽيسٽ هلائڻ، ۽ وڌيڪ.
اوزار جي جوڙجڪ
بوٽ اسٽريپ استعمال ڪري ٿو npm اسڪرپٽ ان جي تعمير سسٽم لاءِ. اسان جي package.json ۾ فريم ورڪ سان ڪم ڪرڻ لاءِ آسان طريقا شامل آهن، بشمول ڪوڊ گڏ ڪرڻ، ٽيسٽ هلائڻ، ۽ وڌيڪ.
اسان جي تعميراتي سسٽم کي استعمال ڪرڻ ۽ مقامي طور تي اسان جي دستاويز کي هلائڻ لاء، توهان کي بوٽ اسٽريپ جي سورس فائلن ۽ نوڊ جي ڪاپي جي ضرورت پوندي. انهن قدمن تي عمل ڪريو ۽ توهان کي پٿر ڪرڻ لاء تيار ٿيڻ گهرجي:
- ڊائون لوڊ ۽ انسٽال ڪريو Node.js ، جيڪو اسان استعمال ڪندا آهيون اسان جي انحصار کي منظم ڪرڻ لاء.
- يا ته ڊائون لوڊ ڪريو بوٽ اسٽريپ جا ذريعا يا فورڪ بوٽ اسٽريپ جي مخزن .
/bootstrap
روٽ ڊاريڪٽري ڏانھن وڃو ۽npm install
اسان جي مقامي انحصار کي انسٽال ڪرڻ لاء ھلايو package.json .
مڪمل ٿيڻ تي، توهان ڪمانڊ لائن مان مهيا ڪيل مختلف حڪمن کي هلائڻ جي قابل هوندا.
npm اسڪرپٽ استعمال ڪندي
اسان جي package.json ۾ پروجيڪٽ کي ترقي ڪرڻ لاءِ ڪيترائي ڪم شامل آھن. npm run
پنھنجي ٽرمينل ۾ سڀ اين پي ايم اسڪرپٽ ڏسڻ لاءِ ھلايو . بنيادي ڪم شامل آهن:
ڪم | وصف |
---|---|
npm start |
CSS ۽ JavaScript گڏ ڪري ٿو، دستاويز ٺاهي ٿو، ۽ مقامي سرور شروع ڪري ٿو. |
npm run dist |
ڊاريڪٽري ٺاهي ٿو dist/ مرتب ڪيل فائلن سان. Sass ، Autoprefixer ، ۽ Terser جي ضرورت آھي . |
npm test |
ڊوڙڻ کان پوء مقامي طور تي ٽيسٽ کي هلائي ٿوnpm run dist |
npm run docs-serve |
مقامي طور تي دستاويز ٺاهي ۽ هلائي ٿو. |
ساس
Bootstrap ڊارٽ سس استعمال ڪري ٿو اسان جي Sass ماخذ فائلن کي CSS فائلن ۾ گڏ ڪرڻ لاءِ (اسان جي تعمير جي عمل ۾ شامل آهي) ۽ اسان توهان کي اهو ئي ڪرڻ جي صلاح ڏيو ٿا جيڪڏهن توهان پنهنجي اثاثن واري پائپ لائن کي استعمال ڪندي Sass مرتب ڪري رهيا آهيو. اسان اڳ ۾ استعمال ڪيو Node Sass Bootstrap v4 لاءِ، پر LibSass ۽ ان جي مٿان ٺهيل پيڪيجز، بشمول Node Sass، هاڻي ختم ٿيل آهن .
ڊارٽ ساس 10 جي گول جي درستگي کي استعمال ڪري ٿو ۽ ڪارڪردگي سببن جي ڪري هن قيمت کي ترتيب ڏيڻ جي اجازت نٿو ڏئي. اسان پنهنجي ٺاهيل CSS جي وڌيڪ پروسيسنگ دوران هن درستگي کي گهٽ نه ٿا ڪريون، جهڙوڪ مينيفڪيشن دوران، پر جيڪڏهن توهان ائين ڪرڻ جو انتخاب ڪيو ٿا ته اسان برائوزر جي گولنگ سان مسئلن کي روڪڻ لاءِ گهٽ ۾ گهٽ 6 جي درستگي برقرار رکڻ جي صلاح ڏيون ٿا.
خودڪشي ڪندڙ
بوٽ اسٽريپ استعمال ڪري ٿو Autoprefixer (شامل آهي اسان جي تعمير جي عمل ۾) خودڪار طور تي وينڊر پريفڪس شامل ڪرڻ لاءِ ڪجهه سي ايس ايس ملڪيتن تي تعمير وقت. ائين ڪرڻ اسان کي وقت ۽ ڪوڊ بچائي ٿو اسان کي اسان جي CSS جا اهم حصا هڪ ئي وقت لکڻ جي اجازت ڏئي ٿي جڏهن ته وينڊرز ميڪسين جي ضرورت کي ختم ڪندي جيئن v3 ۾ مليا آهن.
اسان پنهنجي GitHub مخزن جي اندر هڪ الڳ فائل ۾ Autoprefixer ذريعي سپورٽ ڪيل برائوزرن جي لسٽ برقرار رکون ٿا. تفصيل لاءِ ڏسو .browserslistrc .
RTLCSS
Bootstrap RTLCSS استعمال ڪري ٿو RTLCSS مرتب ڪيل CSS کي پروسيس ڪرڻ ۽ ان کي RTL ۾ تبديل ڪرڻ - بنيادي طور تي افقي طرف جي آگاهي واري ملڪيت (مثال طور padding-left
) کي انهن جي مخالف سان تبديل ڪرڻ. اهو اسان کي اجازت ڏئي ٿو صرف هڪ ڀيرو اسان جي CSS لکڻ ۽ RTLCSS ڪنٽرول ۽ قدر جي هدايتن کي استعمال ڪندي معمولي ٽائيڪس ٺاهڻ.
مقامي دستاويز
اسان جي دستاويزن کي مقامي طور تي هلائڻ جي ضرورت آهي Hugo جو استعمال، جيڪو نصب ٿئي ٿو Hugo-bin npm پيڪيج ذريعي. هيوگو هڪ انتهائي تيز ۽ ڪافي وسيع جامد سائيٽ جنريٽر آهي جيڪو اسان کي مهيا ڪري ٿو: بنيادي شامل آهن، مارڪ ڊائون تي ٻڌل فائلون، ٽيمپليٽس، ۽ وڌيڪ. هتي اهو ڪيئن شروع ڪجي:
- سڀني انحصار کي انسٽال ڪرڻ لاءِ مٿي ڏنل ٽولنگ سيٽ اپ ذريعي هلايو.
- روٽ
/bootstrap
ڊاريڪٽري مان،npm run docs-serve
ڪمانڊ لائن ۾ هلائي. - توهان جي برائوزر ۾ کوليو
http://localhost:9001/
، ۽ voilà.
وڌيڪ سکو استعمال ڪرڻ بابت Hugo ان جي دستاويز پڙهڻ سان .
مشڪلاتون
ڇا توهان کي انحصار کي نصب ڪرڻ ۾ مشڪلاتن سان منهن ڏيڻ گهرجي، سڀني پوئين انحصار ورزن (عالمي ۽ مقامي) کي انسٽال ڪريو. پوء، وري هلايو npm install
.