Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
Check
in English

Yiba negalelo

Nceda ukuphuhlisa i-Bootstrap ngamaxwebhu wethu wokwakha izikripthi kunye novavanyo.

Kweli phepha

Ukuseta izixhobo

I-Bootstrap isebenzisa izikripthi ze-npm ukwakha uxwebhu kunye nokuqokelela iifayile zemvelaphi. Iphakheji yethu.json igcina ezi scripts zokuqokelela ikhowudi, ukuqhuba iimvavanyo, kunye nokunye. Ezi azenzelwanga ukusetyenziswa ngaphandle kwendawo yethu yokugcina kunye namaxwebhu.

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

Iphakheji yethu.json ibandakanya imisebenzi emininzi yokuphuhlisa iprojekthi. Baleka npm runukuze ubone zonke izikripthi ze-npm kwitheminali yakho. Imisebenzi ephambili ibandakanya:

Umsebenzi Inkcazo
npm start Iqokelela i-CSS kunye neJavaScript, yakha amaxwebhu, kwaye iqalisa iseva yendawo.
npm run dist Yenza 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.
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

IBootstrap isebenzisa iDart Sass ekuqulunqeni iifayile zomthombo weSass kwiifayile zeCSS (ezibandakanyiweyo kwinkqubo yethu yokwakha), kwaye sicebisa ukuba wenze okufanayo ukuba uqulunqa iSass usebenzisa owakho umbhobho we-asethi. Ngaphambili sasebenzisa i-Node Sass ye-Bootstrap v4, kodwa i-LibSass kunye neepakethi ezakhiwe phezu kwayo, kuquka i-Node Sass, ngoku zihoxisiwe .

I-Dart Sass isebenzisa ukuchaneka okujikelezayo kwe-10 kwaye ngenxa yezizathu ezisebenzayo ayivumeli ukulungiswa kweli xabiso. Asiyithobi le ngcaciso ngexesha lokuqhubela phambili kwe-CSS yethu eyenziweyo, njengaxa kuncitshiswa, kodwa ukuba ukhetha ukwenza njalo sicebisa ukuba ugcine ukuchaneka oku-6 ubuncinane ukunqanda imiba ngokurhangqwa kwesikhangeli.

Autoprefixer

I- Bootstrap isebenzisa i -Autoprefixer (ebandakanyiweyo kwinkqubo yethu yokwakha) ukongeza ngokuzenzekelayo izimaphambili zomthengisi kwezinye iipropathi zeCSS ngexesha lokwakha. Ukwenza oko kusigcina ixesha kunye nekhowudi ngokusivumela ukuba sibhale iinxalenye eziphambili zeCSS yethu ngexesha elinye ngelixa sisusa imfuno yokuxutywa kwabathengisi njengabo bafumaneka kwi-v3.

Sigcina uluhlu lwezikhangeli ezixhaswayo nge-Autoprefixer kwifayile eyahlukileyo ngaphakathi kwendawo yethu yokugcina i-GitHub. Bona .browserlistrc ngeenkcukacha.

I-RTLCSS

I- Bootstrap isebenzisa i -RTLCSS ukucubungula i-CSS eqokelelweyo kwaye iyiguqulele kwi-RTL - ngokusisiseko ibuyisela iipropati eziqaphela umkhomba-ndlela othe tye (umzekelo padding-left) ngokuchasana kwazo. Ivumela ukuba sibhale i-CSS yethu ngexesha elinye kwaye senze ii-tweaks ezincinci sisebenzisa ulawulo lwe-RTLCSS kunye nezikhokelo zexabiso .

Amaxwebhu asekuhlaleni

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.