in English

Yakha izixhobo

Funda indlela yokusebenzisa i-Bootstrap equkiweyo yemibhalo eshicilelweyo ye-npm ukwakha amaxwebhu ethu, ukuqokelela ikhowudi yemvelaphi, ukuqhuba iimvavanyo, kunye nokunye.

Ukuseta izixhobo

I-Bootstrap isebenzisa izikripthi ze-npm zenkqubo yayo yokwakha. Iphakheji.json yethu ibandakanya iindlela ezifanelekileyo zokusebenza kunye nesakhelo, kubandakanya ukuqulunqa ikhowudi, ukuqhuba iimvavanyo, kunye nokunye.

Ukusebenzisa inkqubo yethu yokwakha kwaye usebenzise amaxwebhu ethu ekuhlaleni, uya kufuna ikopi yeefayile zemvelaphi yeBootstrap kunye neNode. Landela la manyathelo kwaye kuya kufuneka ukuba ulungele ukushukuma:

  1. Khuphela kwaye ufake i-Node.js , esiyisebenzisayo ukulawula ukuxhomekeka kwethu.
  2. Okanye ukhuphele imithombo yeBootstrap okanye ifolokhwe yendawo yokugcina yeBootstrap .
  3. Lawula kulawulo lweengcambu /bootstrapkwaye ubaleke npm installukufaka ukuxhomekeka kwethu kwendawo edweliswe kwi package.json .

Xa ugqityiwe, uya kukwazi ukusebenzisa imiyalelo eyahlukeneyo enikezelweyo kumgca womyalelo.

Ukusebenzisa izikripthi ze-npm

Ipakethe yethu.json ibandakanya le miyalelo kunye nemisebenzi elandelayo:

Umsebenzi Inkcazo
npm run dist npm run distyenza /dist/uvimba weefayili ngeefayile eziqokelelweyo. Isebenzisa iSass , iAutoprefixer , kunye neterser .
npm test Iqhuba iimvavanyo ekuhlaleni emva kokubalekanpm run dist
npm run docs-serve Yakha kwaye iqhuba uxwebhu ekuhlaleni.

Baleka npm runukuze ubone zonke izikripthi ze-npm.

Qalisa ngeBootstrap nge-npm ngeprojekthi yethu yokuqalisa! Intloko uye kwi- twbs/bootstrap-npm-starter template repository ukubona indlela yokwakha kunye nokwenza ngokwezifiso i-Bootstrap kwiprojekthi yakho ye-npm. Kubandakanya i-Sass compiler, i-Autoprefixer, i-Stylelint, i-PurgeCSS, kunye ne-Icons ze-Bootstrap.

Sass

I-Bootstrap v4 isebenzisa iNode Sass yokuqulunqa iifayile zethu zomthombo weSass kwiifayile zeCSS (ezibandakanyiweyo kwinkqubo yethu yokwakha). Ukuze ugqibezele nge-CSS efanayo eyenziweyo xa uqulunqa i-Sass usebenzisa umbhobho we-asethi yakho, kuya kufuneka usebenzise umqokeleli weSass oxhasa ubuncinci iimpawu ezenziwa yiNode Sass. Oku kubalulekile ukuqaphela kuba ukususela ngo-Oktobha 26, 2020, i-LibSass kunye neepakethe ezakhiwe phezu kwayo-kuquka i-Node Sass- ziyehlisiwe .

Ukuba ufuna iifitsha zeSass ezintsha okanye ukuhambelana nemigangatho emitsha yeCSS, iDart Sass ngoku iluphunyezo oluphambili lweSass kwaye ixhasa iJavaScript API ehambelana ngokupheleleyo neNode Sass (ngaphandle kwezinto ezimbalwa ezidweliswe kwiphepha leGitHub leDart Sass ) .

We increase the Sass rounding precision to 6 (by default, it’s 5 in Node Sass) to prevent issues with browser rounding. If you use Dart Sass this won’t be something you need to adjust, as that compiler uses a rounding precision of 10 and for efficiency reasons does not allow it to be adjusted.

Autoprefixer

Bootstrap uses Autoprefixer (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.

We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See .browserslistrc for details.

Local documentation

Ukuqhuba amaxwebhu ethu ekuhlaleni kufuna ukusetyenziswa kweHugo, efakwa nge- hugo-bin npm package. I-Hugo yijenereyitha yesiza esime ngokukhawuleza ekhawulezayo kwaye eyandisiweyo esinika: isiseko sibandakanya, iifayile ezisekwe kuMarkdown, iitemplates, kunye nokunye. Nantsi indlela yokuyiqalisa:

  1. Qhuba useto lwesixhobo ngasentla ukufaka zonke izinto ezixhomekeke kuyo.
  2. Ukusuka /bootstrapkulawulo lweengcambu, sebenzisa npm run docs-servekumgca womyalelo.
  3. Vula kwisikhangeli http://localhost:9001/sakho, kwaye voilà.

Funda ngakumbi malunga nokusebenzisa uHugo ngokufunda amaxwebhu ayo .

Ukulungisa ingxaki

Ukuba udibana neengxaki ngokufakela ukuxhomekeka, khupha zonke iinguqulelo zangaphambili zokuxhomekeka (kwihlabathi jikelele kunye nelasekhaya). Emva koko, phinda wenze npm install.