አዋጡ

በእኛ የሰነድ ግንባታ ስክሪፕቶች እና ሙከራዎች Bootstrapን ለማዳበር ያግዙ።

በዚህ ገጽ ላይ

የመሳሪያ ዝግጅት

Bootstrap ሰነዶችን ለመገንባት እና የምንጭ ፋይሎችን ለመሰብሰብ የ npm ስክሪፕቶችን ይጠቀማል። Our package.json ኮድ ለመሰብሰብ፣ ሙከራዎችን ለማካሄድ እና ሌሎችንም እነዚህን ስክሪፕቶች ይዟል። እነዚህ ከእኛ ማከማቻ እና ሰነድ ውጭ ለመጠቀም የታሰቡ አይደሉም።

የግንባታ ስርዓታችንን ለመጠቀም እና ሰነዶቻችንን በአገር ውስጥ ለማስኬድ የBootstrap የምንጭ ፋይሎች እና መስቀለኛ መንገድ ቅጂ ያስፈልግዎታል። እነዚህን ቅደም ተከተሎች ይከተሉ እና ለመወዝወዝ ዝግጁ መሆን አለብዎት:

የእኛን ጥገኝነቶች ለማስተዳደር የምንጠቀመው Node.js ያውርዱ እና ይጫኑ ።
የ Bootstrapን ምንጮች ያውርዱ ወይም ሹካ የ Bootstrap ማከማቻ .
ወደ ስርወ /bootstrapማውጫው ይሂዱ እና በጥቅልnpm install ውስጥ የተዘረዘሩትን የአካባቢያችንን ጥገኞች ለመጫን ያሂዱ ።

ሲጨርሱ ከትዕዛዝ መስመሩ የተሰጡ የተለያዩ ትዕዛዞችን ማስኬድ ይችላሉ።

npm ስክሪፕቶችን በመጠቀም

Our package.json ፕሮጀክቱን ለማዘጋጀት በርካታ ተግባራትን ያካትታል። npm runበእርስዎ ተርሚናል ውስጥ ያሉትን ሁሉንም npm ስክሪፕቶች ለማየት ሩጡ ። ዋና ተግባራት የሚከተሉትን ያካትታሉ:

ተግባር	መግለጫ
`npm start`	CSS እና JavaScriptን ያጠናቅራል፣ ሰነዶቹን ይገነባል እና የሀገር ውስጥ አገልጋይ ይጀምራል።
`npm run dist`	`dist/`ማውጫውን ከተሰበሰቡ ፋይሎች ጋር ይፈጥራል ። Sass ፣ Autoprefixer እና terser ያስፈልገዋል ።
`npm test`	ከሩጫ በኋላ ሙከራዎችን በአገር ውስጥ ያካሂዳል`npm run dist`
`npm run docs-serve`	ሰነዶቹን በአገር ውስጥ ይገነባል እና ያስኬዳል።

በጀማሪ ፕሮጄክታችን በ npm በኩል በ Bootstrap ይጀምሩ! Bootstrapን በራስዎ npm ፕሮጀክት ውስጥ እንዴት መገንባት እና ማበጀት እንደሚችሉ ለማየት ወደ twbs /bootstrap-npm-starter አብነት ማከማቻ ይሂዱ። Sass compiler፣ Autoprefixer፣ Stylelint፣ PurgeCSS እና Bootstrap አዶዎችን ያካትታል።

ሳስ

Bootstrap የ Sass ምንጭ ፋይሎቻችንን ወደ ሲኤስኤስ ፋይሎች (በግንባታ ሂደታችን ውስጥ የተካተቱትን) ለማጠናቀር Dart Sass ን ይጠቀማል እና የራስዎን የንብረት ቧንቧ መስመር ተጠቅመው Sass እያጠናቀሩ ከሆነ ተመሳሳይ ነገር እንዲያደርጉ እንመክራለን። ከዚህ ቀደም Node Sass ለ Bootstrap v4 እንጠቀም ነበር፣ ነገር ግን LibSass እና በላዩ ላይ የተገነቡ ጥቅሎች፣ Node Sassን ጨምሮ አሁን ተቋርጠዋል ።

Dart Sass የ 10 የማጠጋጋት ትክክለኛነትን ይጠቀማል እና በውጤታማነት ምክንያቶች የዚህን እሴት ማስተካከል አይፈቅድም። ይህንን ትክክለኛነት በምናመነጨው CSS ተጨማሪ ሂደት ላይ አንቀንሰውም፣ ለምሳሌ በማቃለል ጊዜ፣ ነገር ግን ይህን ለማድረግ ከመረጡ በአሳሽ ማጠጋጋት ላይ ችግሮችን ለመከላከል ቢያንስ 6 ትክክለኛነትን እንዲጠብቁ እንመክራለን።

ራስ-ቅጥያ

ቡትስትራፕ በግንባታ ጊዜ ለአንዳንድ የሲኤስኤስ ንብረቶች የአቅራቢ ቅድመ ቅጥያዎችን በራስ ሰር ቅድመ ቅጥያ (በእኛ የግንባታ ሂደት ውስጥ የተካተተ) ይጠቀማል። ይህን ማድረጋችን የ CSSችንን ቁልፍ ክፍሎች በአንድ ጊዜ እንድንጽፍ በመፍቀድ ጊዜን እና ኮድን ይቆጥባል እንዲሁም በ v3 ላይ የሚገኙትን የአቅራቢዎች ድብልቅን አስፈላጊነት በማስወገድ።

በAutoprefixer በኩል የሚደገፉትን የአሳሾች ዝርዝር በ GitHub ማከማቻችን ውስጥ በተለየ ፋይል ውስጥ እናስቀምጣለን። ለዝርዝሮች .browserslistrc ን ይመልከቱ።

RTLCSS

Bootstrap የተቀናበረ CSSን ለማስኬድ እና ወደ RTL ለመቀየር RTLCSSpadding-left ን ይጠቀማል - በመሠረቱ አግድም አቅጣጫ ግንዛቤ ባህሪያትን (ለምሳሌ ) በተቃራኒው ይተካል። የእኛን CSS በአንድ ጊዜ እንድንጽፍ እና የ RTLCSS ቁጥጥር እና የእሴት መመሪያዎችን በመጠቀም ጥቃቅን ማስተካከያዎችን እንድናደርግ ያስችለናል።

የአካባቢ ሰነዶች

ሰነዶቻችንን በአገር ውስጥ ማስኬድ በ hugo-bin npm ጥቅል በኩል የሚጫነውን ሁጎን መጠቀም ይጠይቃል ። ሁጎ በጣም ፈጣን እና ሊሰፋ የሚችል የማይንቀሳቀስ ጣቢያ ጀነሬተር ነው፡ የሚሰጠን፡ መሰረታዊ የሚያጠቃልለው፣ Markdown ላይ የተመሰረቱ ፋይሎች፣ አብነቶች እና ሌሎችም። እንዴት እንደሚጀመር እነሆ፡-

ሁሉንም ጥገኞች ለመጫን ከላይ ባለው የመሳሪያ ዝግጅት ያሂዱ ።
ከስር /bootstrapማውጫው, npm run docs-serveበትእዛዝ መስመር ውስጥ ያሂዱ.
http://localhost:9001/በአሳሽዎ ውስጥ ይክፈቱ እና voilà።

ሰነዶቹን በማንበብ ስለ ሁጎ አጠቃቀም የበለጠ ይረዱ ።

ችግርመፍቻ

ጥገኞችን በመጫን ላይ ችግሮች ካጋጠሙዎት ሁሉንም የቀድሞ የጥገኝነት ስሪቶች (ዓለም አቀፍ እና አካባቢያዊ) ያራግፉ። ከዚያ እንደገና ያሂዱ npm install።