মূল বিষয়বস্তুলৈ এৰি যাওক নথিপত্ৰ নেভিগেচনলৈ এৰি যাওক
in English

সঁজুলি নিৰ্মাণ কৰক

আমাৰ আলেখ্যন নিৰ্মাণ কৰিবলে, উৎস ক'ড কম্পাইল কৰিবলে, পৰীক্ষাসমূহ চলাবলে, আৰু অধিক কৰিবলে Bootstrap ৰ অন্তৰ্ভুক্ত npm স্ক্ৰিপ্টসমূহ কেনেকৈ ব্যৱহাৰ কৰিব লাগে শিকিব।

এই পৃষ্ঠাত

টুলিং ছেটআপ

বুটষ্ট্ৰেপে ইয়াৰ নিৰ্মাণ ব্যৱস্থাপ্ৰণালীৰ বাবে npm স্ক্ৰিপ্টসমূহ ব্যৱহাৰ কৰে । আমাৰ package.json এ ফ্ৰেমৱৰ্কৰ সৈতে কাম কৰাৰ বাবে সুবিধাজনক পদ্ধতিসমূহ অন্তৰ্ভুক্ত কৰে, ক'ড কম্পাইলিং, পৰীক্ষাসমূহ চলোৱা, আৰু অধিক অন্তৰ্ভুক্ত কৰি।

আমাৰ নিৰ্মাণ ব্যৱস্থাপ্ৰণালী ব্যৱহাৰ কৰিবলে আৰু আমাৰ আলেখ্যন স্থানীয়ভাৱে চলাবলৈ, আপুনি Bootstrap ৰ উৎস নথিপত্ৰসমূহ আৰু ন'ডৰ এটা কপিৰ প্ৰয়োজন হ'ব । এই পদক্ষেপসমূহ অনুসৰণ কৰক আৰু আপুনি ৰক কৰিবলৈ সাজু হ'ব লাগে:

  1. Node.js ডাউনলোড আৰু ইনষ্টল কৰক , যিটো আমি আমাৰ নিৰ্ভৰশীলতাসমূহ পৰিচালনা কৰিবলৈ ব্যৱহাৰ কৰো।
  2. হয় Bootstrap ৰ উৎসসমূহ ডাউনলোড কৰক বা Bootstrap ৰ ভঁৰাল fork কৰক ।
  3. /bootstrapৰূট পঞ্জিকালৈ নেভিগেট কৰক আৰু package.jsonnpm install ত তালিকাভুক্ত আমাৰ স্থানীয় নিৰ্ভৰশীলতাসমূহ সংস্থাপন কৰিবলে চলাওক ।

সম্পূৰ্ণ হ'লে, আপুনি আদেশ শাৰীৰ পৰা প্ৰদান কৰা বিভিন্ন আদেশ চলাব পাৰিব।

npm লিপি ব্যৱহাৰ কৰা

আমাৰ package.json ত প্ৰকল্পটো বিকাশ কৰাৰ বাবে বহুতো কাম অন্তৰ্ভুক্ত কৰা হৈছে। npm runআপোনাৰ টাৰ্মিনেলত সকলো npm স্ক্ৰিপ্ট চাবলৈ চলাওক । প্ৰাথমিক কামসমূহৰ ভিতৰত আছে:

কাৰ্য বিৱৰণ
npm start CSS আৰু JavaScript কম্পাইল কৰে, আলেখ্যন নিৰ্মাণ কৰে, আৰু এটা স্থানীয় চাৰ্ভাৰ আৰম্ভ কৰে।
npm run dist dist/কম্পাইল কৰা নথিপত্ৰসমূহৰ সৈতে ডাইৰেকটৰি সৃষ্টি কৰে । Sass , স্বয়ংক্ৰিয় উপসৰ্গ , আৰু terser ৰ প্ৰয়োজন ।
npm test চলোৱাৰ পিছত স্থানীয়ভাৱে পৰীক্ষা চলায়npm run dist
npm run docs-serve আলেখ্যনসমূহ স্থানীয়ভাৱে নিৰ্মাণ আৰু চলায়।
আমাৰ আৰম্ভণি প্ৰকল্পৰ সৈতে npm ৰ জৰিয়তে Bootstrap ৰ সৈতে আৰম্ভ কৰক! আপোনাৰ নিজৰ npm প্ৰকল্পত Bootstrap কেনেকৈ নিৰ্মাণ আৰু স্বনিৰ্বাচিত কৰিব লাগে চাবলৈ twbs/bootstrap-npm-starter সাঁচ ভঁৰাললৈ যাওক । Sass কমপাইলাৰ, স্বয়ংপ্ৰিফিক্সাৰ, Stylelint, PurgeCSS, আৰু বুটষ্ট্ৰেপ আইকনসমূহ অন্তৰ্ভুক্ত কৰে।

ছাছ

বুটষ্ট্ৰেপে আমাৰ Sass উৎস নথিপত্ৰসমূহক CSS নথিপত্ৰসমূহত কমপাইল কৰাৰ বাবে Dart Sass ব্যৱহাৰ কৰে (আমাৰ নিৰ্মাণ প্ৰক্ৰিয়াত অন্তৰ্ভুক্ত), আৰু আমি আপোনাক একে কাম কৰাৰ পৰামৰ্শ দিওঁ যদি আপুনি আপোনাৰ নিজৰ সম্পত্তি পাইপলাইন ব্যৱহাৰ কৰি Sass কম্পাইল কৰিছে । আমি পূৰ্বতে Bootstrap v4 ৰ বাবে Node Sass ব্যৱহাৰ কৰিছিলোঁ, কিন্তু LibSass আৰু ইয়াৰ ওপৰত নিৰ্মিত সৰঞ্জামসমূহ, Node Sass অন্তৰ্ভুক্ত কৰি, এতিয়া অবচিত ।

Dart Sass এ 10 ৰ এটা ঘূৰণীয়া নিখুঁততা ব্যৱহাৰ কৰে আৰু কাৰ্য্যক্ষমতাৰ কাৰণে এই মান সামঞ্জস্য কৰাৰ অনুমতি নিদিয়ে। আমি আমাৰ সৃষ্টি কৰা CSS ৰ পৰৱৰ্তী প্ৰচেছিংৰ সময়ত এই নিখুঁততা কম নকৰো, যেনে ক্ষুদ্ৰকৰণৰ সময়ত, কিন্তু যদি আপুনি তেনে কৰিবলৈ বাছি লৈছে আমি ব্ৰাউজাৰ ৰাউণ্ডিঙৰ সৈতে সমস্যা ৰোধ কৰিবলৈ অন্ততঃ 6 ৰ নিখুঁততা বজাই ৰখাৰ পৰামৰ্শ দিওঁ।

স্বয়ং উপসৰ্গ

বুটষ্ট্ৰেপে নিৰ্মাণৰ সময়ত কিছুমান CSS বৈশিষ্ট্যসমূহত বিক্ৰেতা উপসৰ্গসমূহ স্বয়ংক্ৰিয়ভাৱে যোগ কৰিবলে Autoprefixer (আমাৰ নিৰ্মাণ প্ৰক্ৰিয়াত অন্তৰ্ভুক্ত) ব্যৱহাৰ কৰে। তেনে কৰিলে আমাৰ CSS ৰ মূল অংশসমূহ এবাৰ লিখিবলৈ অনুমতি দি আমাৰ সময় আৰু ক'ড ৰাহি হয় আৰু v3 ত পোৱাৰ দৰে ভেণ্ডৰ মিক্সিনৰ প্ৰয়োজনীয়তা নাইকিয়া হয়।

আমি আমাৰ GitHub ভঁৰালৰ ভিতৰত এটা পৃথক ফাইলত Autoprefixer ৰ যোগেদি সমৰ্থিত ব্ৰাউজাৰসমূহৰ তালিকা ৰক্ষণাবেক্ষণ কৰোঁ। বিৱৰণৰ বাবে .browserslistrc চাওক ।

RTLCSS

বুটষ্ট্ৰেপে কমপাইল কৰা CSS প্ৰক্ৰিয়া কৰিবলে আৰু সিহতক RTL লৈ ৰূপান্তৰ কৰিবলে RTLCSS ব্যৱহাৰ কৰে – মূলতঃ অনুভূমিক দিশ সচেতন বৈশিষ্ট্যসমূহক (যেনে padding-left) সিহতৰ বিপৰীতৰ সৈতে সলনি কৰি । ই আমাক কেৱল আমাৰ CSS এটা এবাৰ লিখিবলৈ আৰু RTLCSS নিয়ন্ত্ৰণ আৰু মূল্য নিৰ্দেশনা ব্যৱহাৰ কৰি সৰু সৰু টুইক কৰিবলৈ অনুমতি দিয়ে।

স্থানীয় নথিপত্ৰ

আমাৰ আলেখ্যন স্থানীয়ভাৱে চলাবলৈ Hugo ৰ ব্যৱহাৰৰ প্ৰয়োজন, যি hugo-bin npm সৰঞ্জামৰ যোগেদি সংস্থাপন কৰা হয় । হুগো হৈছে এটা ব্লাইজলি দ্ৰুত আৰু যথেষ্ট সম্প্ৰসাৰণযোগ্য ষ্টেটিক চাইট জেনেৰেটৰ যিয়ে আমাক প্ৰদান কৰে: মূল অন্তৰ্ভুক্ত, মাৰ্কডাউন-ভিত্তিক ফাইলসমূহ, সাঁচসমূহ, আৰু অধিক। ইয়াক কেনেকৈ আৰম্ভ কৰিব পাৰি ইয়াত দেখুওৱা হৈছে:

  1. সকলো নিৰ্ভৰশীলতা সংস্থাপন কৰিবলে ওপৰৰ সঁজুলি প্ৰতিষ্ঠাৰ মাজেৰে চলাওক ।
  2. ৰূট /bootstrapডাইৰেকটৰীৰ পৰা, npm run docs-serveআদেশ শাৰীত চলাওক।
  3. http://localhost:9001/আপোনাৰ ব্ৰাউজাৰত খোলক , আৰু voilà.

ইয়াৰ আলেখ্যন পঢ়ি Hugo ব্যৱহাৰ কৰাৰ বিষয়ে অধিক শিকিব ।

সমস্যা সমাধান কৰা

আপুনি নিৰ্ভৰশীলতাসমূহ সংস্থাপন কৰাৰ সৈতে সমস্যাৰ সন্মুখীন হ'লে, সকলো পূৰ্বৱৰ্তী নিৰ্ভৰশীলতা সংস্কৰণ (গোলকীয় আৰু স্থানীয়) আনইনস্টল কৰক । তাৰ পিছত, পুনৰ চলাওক npm install.