መሳርሒታት ምህናጽ

ሰነዳትና ንምህናጽ፡ ምንጪ ኮድ ንምጥርናፍ፡ ፈተነታት ንምክያድን ካልእን ብኸመይ ኣብ Bootstrap ዝተሓወሱ npm ስክሪፕትታት ከም እንጥቀም ንመሃር።

ኣብዚ ገጽ

ምድላው መሳርሒታት

ቡትስትራፕ ንህንጻ ስርዓቱ npm ስክሪፕት ይጥቀም። package.json ናትና ምስቲ ፍሬምዎርክ ንምስራሕ ምቹኣት ሜላታት ዘጠቓልል ኮይኑ፡ ኮድ ምጥርናፍ፡ ፈተነታት ምክያድን ካልእን ይርከብዎም።

ናትና build system ንምጥቃምን ሰነዳትና ኣብ ውሽጢ ዓዲ ንምስራሕን፡ ቅዳሕ ናይ Bootstrap ምንጪ ፋይላትን Nodeን ከድልየኩም እዩ። ነዞም ዝስዕቡ ስጉምትታት ተኸተል እሞ ንኽትናወጽ ድሉው ክትከውን ኣለካ፤

ጽግዕተኛታትና ንምምሕዳር እንጥቀመሉ Node.js ኣውሪድና ንጽዓኖ ።
ወይ ምንጪታት ቡትስትራፕ ኣውርድ ወይ ድማ መኽዘን ቡትስትራፕ ፎርክ ግበር ።
ናብቲ ሱር /bootstrapማህደር ብምኻድ ኣብ package.jsonnpm install ዝተዘርዘሩ ናይ ከባቢና ጽግዕተኛታትና ንምትካል ንጉየ ።

ምስ ተዛዘመ፡ ካብ መስመር ትእዛዝ ዝቐረቡ ዝተፈላለዩ ትእዛዛት ከተካይድ ትኽእል ኢኻ።

npm ስክሪፕት ምጥቃም

package.json ናትና ነቲ ፕሮጀክት ንምምዕባል ዝሕግዙ ብዙሓት ዕማማት ዘጠቓልል እዩ። npm runኣብ ተርሚናልካ ዘለዉ ኩሎም npm ስክሪፕትታት ንምርኣይ ጐየዩ ። ቀዳሞት ዕማማት ድማ፤

ዕዮ	መግለፂ
`npm start`	ሲኤስኤስን ጃቫስክሪፕትን ኣጠቓሊሉ፡ ነቲ ሰነድ ይሃንጽ፡ ከምኡ’ውን ሎካል ሰርቨር ይጅምር።
`npm run dist`	`dist/`ነቲ ማህደር ምስ ዝተጠርነፉ ፋይላት ይፈጥር ። Sass , Autoprefixer , ከምኡውን terser የድልዮ ።
`npm test`	ድሕሪ ምጉያይ ኣብ ከባቢኡ ፈተነታት የካይድ`npm run dist`
`npm run docs-serve`	ነቲ ሰነድ ኣብ ከባቢኡ ይሃንጾን የካይዶን።

ብ Bootstrap ብመንገዲ npm ምስ ጀማሪ ፕሮጀክትና ጀምር! ኣብ ናይ ገዛእ ርእስኻ npm ፕሮጀክት ከመይ ጌርካ Bootstrap ትሃንጽን ትመዓራረን ንምርኣይ ናብ twbs/bootstrap-npm-starter template repository ኣቕንዕ። Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ከምኡውን Bootstrap Icons ዘጠቓልል እዩ።

ሳስ

ቡትስትራፕ ንናይ ሳስ ምንጪ ፋይላትና ናብ CSS ፋይላት (ኣብ መስርሕ ህንጸትና ዝተሓወሱ) ንምጥርናፍ Dart Sass ይጥቀም ፣ ናይ ገዛእ ርእስኻ ንብረት ሻምብቆ ተጠቒምካ ንሳስ ትጥርንፍ እንተኾንካ ድማ ከምኡ ክትገብር ንመክር። ቅድሚ ሕጂ ን Bootstrap v4 Node Sass ንጥቀም ኔርና ኢና፡ LibSassን ኣብ ልዕሊኡ ዝተሃንጹ ፓኬጃትን ግን Node Sass ሓዊስካ፡ ሕጂ ካብ ስራሕ ወጻኢ ኮይኖም ኣለዉ ።

ዳርት ሳስ 10 ዝኾነ ናይ ምኽባብ ትኽክለኛነት ይጥቀምን ብብቕዓት ምኽንያት ድማ ምትዕርራይ ናይዚ ዋጋ ኣይፈቅድን እዩ። ነዚ ትኽክለኛነት ኣብ እዋን ተወሳኺ መስርሕ ናይቲ ዝፈጠሮ CSS ኣይነጉድሎን ኢና፣ ከም ኣብ እዋን ምጉዳል፣ እንተኾነ ግን ከምኡ ክትገብሩ እንተመሪጽኩም ኣብ ምኽባብ መርበብ ሓበሬታ ንዘጋጥሙ ጸገማት ንምክልኻል እንተወሓደ 6 ትኽክለኛነት ክትሕሉ ንመክር።

ኣውቶፕሪፊክሰር

ቡትስትራፕ ኣብ ግዜ ህንጸት ኣብ ገለ CSS ባህርያት ብኣውቶማቲክ ቅድመ-ጥብቆታት ሸየጥቲ ንምውሳኽ Autoprefixer (ኣብ መስርሕ ህንጸትና ዝተሓወሶ) ይጥቀም። ከምኡ ምግባርና ከምቶም ኣብ v3 ዝርከቡ ናይ ሸየጥቲ ሚክሲናት ኣድላይነት እናኣወገድና ቁልፊ ክፋላት ናይ CSSና ኣብ ሓደ ግዜ ክንጽሕፍ ብምፍቃድ ግዜን ኮድን ይቑጥበልና።

ዝርዝር ናይቶም ብመንገዲ Autoprefixer ዝድገፉ መርበባት ሓበሬታ ኣብ ውሽጢ መኽዘን GitHubና ኣብ ፍሉይ ፋይል ንሕዞ። ንዝርዝር ሓበሬታ .browserslistrc ርአ ።

RTLCSS ዝበሃል ትካል እዩ።

Bootstrap ንዝተጠርነፈ CSS ንምስራሕን ናብ RTL ንምቕያርን RTLCSSpadding-left ይጥቀም – ብመሰረቱ ንኣግማድ ኣንፈት ዝፈልጡ ባህርያት (ንኣብነት ) ብኣንጻሩ ይትክእ። CSSና ኣብ ሓደ ግዜ ጥራይ ክንጽሕፍን RTLCSS control and value directives ተጠቒምና ንኣሽቱ tweaks ክንገብርን የኽእለና ።

ናይ ከባቢ ሰነዳት።

ሰነዳትና ኣብ ውሽጢ ዓዲ ምዝዋር ሁጎ ምጥቃም የድሊ፣ እዚ ድማ ብመንገዲ hugo-bin npm package ይተክል። ሁጎ ንዓና ዝህበና blazingly ቅልጡፍን ምሉእ ብምሉእ ዝዝርጋሕን ስታትቲክ ሳይት ጀነሬተር እዩ: መሰረታዊ ዘጠቓልል, Markdown-based files, templates, and more. ከመይ ጌርካ ከም እትጅምሮ ኣብዚ ኣሎ፤

ኩሎም ጽግዕተኛታት ንምትካል በቲ ኣብ ላዕሊ ዘሎ ናይ መሳርሒታት ኣወዳድባ ንጉየ ።
ካብቲ ሱር /bootstrapማህደር npm run docs-serveኣብ መስመር ትእዛዝ ንስራሕ።
http://localhost:9001/ኣብ መርበብ ሓበሬታኻ ክፈት ፡ voilà ድማ።

ብዛዕባ ኣጠቓቕማ ሁጎ ዝያዳ ፍለጡ ሰነዳቱ ብምንባብ ።

ምፍታሕ ጸገማት

ኣብ ምትካል ጽግዕተኛታት ጸገማት እንተ ኣጋጢሙካ፡ ንኹሎም ዝሓለፉ ጽግዕተኛታት ስሪት (ዓለማውን ከባብያውን) ኣውጽእዎ። ድሕሪኡ፡ ዳግማይ ምዝዋር npm install.