Yakha amathuluzi

Funda ukuthi zisetshenziswa kanjani izikripthi ze-Bootstrap ezifakiwe ze-npm ukuze wakhe amadokhumenti ethu, uhlanganise ikhodi yomthombo, wenze izivivinyo, nokuningi.

Kuleli khasi

Ukusethwa kwamathuluzi

I-Bootstrap isebenzisa imibhalo ye- npm yesistimu yayo yokwakha. I- package.json yethu ihlanganisa izindlela ezikahle zokusebenza ngohlaka, okuhlanganisa ukuhlanganisa ikhodi, ukuqalisa ukuhlola, nokunye okwengeziwe.

Ukuze usebenzise isistimu yethu yokwakha nokusebenzisa imibhalo yethu endaweni, uzodinga ikhophi yamafayela omthombo we-Bootstrap kanye ne-Node. Landela lezi zinyathelo futhi kufanele ulungele ukuzamazama:

Landa futhi ufake i-Node.js , esiyisebenzisela ukuphatha ukuncika kwethu.
Ungalanda imithombo ye-Bootstrap noma indawo yokugcina ye-Bootstrap yemfoloko .
Zulazulela kuhlu /bootstraplwemibhalo oluyimpande bese ugijima npm installukuze ufake okuncika kwethu kwendawo okusohlwini lwe- package.json .

Uma usuqedile, uzokwazi ukusebenzisa imiyalo ehlukahlukene enikelwe emugqeni womyalo.

Ukusebenzisa izikripthi ze-npm

I- package.json yethu ihlanganisa imisebenzi eminingi yokuthuthukisa iphrojekthi. Gijimani npm runukuze ubone zonke izikripthi ze-npm kutheminali yakho. Imisebenzi eyinhloko ihlanganisa:

Umsebenzi	Incazelo
`npm start`	Ihlanganisa i-CSS ne-JavaScript, yakha imibhalo, bese iqala iseva yendawo.
`npm run dist`	Idala `dist/`uhla lwemibhalo ngamafayela ahlanganisiwe. Idinga i- Sass , i- Autoprefixer , ne- terser .
`npm test`	Isebenzisa izivivinyo endaweni ngemva kokusebenza`npm run dist`
`npm run docs-serve`	Yakha futhi iqhube imibhalo endaweni.

Qalisa nge-Bootstrap nge-npm ngephrojekthi yethu yokuqala! Hamba ku- twbs/bootstrap-npm-starter template repository ukuze ubone indlela yokwakha nokwenza ngokwezifiso i-Bootstrap kuphrojekthi yakho ye-npm. Kufaka phakathi i-Sass compiler, Autoprefixer, Stylelint, PurgeCSS, nezithonjana ze-Bootstrap.

Sass

I-Bootstrap isebenzisa i - Dart Sass ukuze ihlanganise amafayela ethu omthombo we-Sass kumafayela e-CSS (afakwe ohlelweni lwethu lokwakha), futhi sincoma ukuthi wenze okufanayo uma uhlanganisa i-Sass usebenzisa ipayipi lakho lempahla. Ngaphambilini sasebenzisa i-Node Sass ye-Bootstrap v4, kodwa i-LibSass namaphakheji akhelwe phezu kwayo, okuhlanganisa i-Node Sass, manje asehoxisiwe .

I-Dart Sass isebenzisa ukunemba okuyindilinga okungu-10 futhi ngenxa yezizathu zokusebenza kahle ayikuvumeli ukulungiswa kwaleli nani. Asehlisi lokhu kunemba phakathi nokucutshungulwa okwengeziwe kwe-CSS yethu ekhiqiziwe, njengalapho kuncishiswa, kodwa uma ukhethe ukwenza kanjalo sincoma ukuthi ugcine ukunemba okungenani okungu-6 ukuze uvimbele izinkinga ngokufinyezwa kwesiphequluli.

Isiqalo esizenzakalelayo

I -Bootstrap isebenzisa i -Autoprefixer (efakwe kunqubo yethu yokwakha) ukwengeza ngokuzenzakalelayo iziqalo zomthengisi kwezinye izakhiwo ze-CSS ngesikhathi sokwakha. Ukwenza kanjalo kusisindisa isikhathi nekhodi ngokusivumela ukuthi sibhale izingxenye ezibalulekile ze-CSS yethu ngesikhathi esisodwa kuyilapho sisusa isidingo sezingxube zabathengisi njengalezo ezitholakala ku-v3.

Sigcina uhlu lweziphequluli ezisekelwa nge-Autoprefixer kufayela elihlukile ngaphakathi kwendawo yethu ye-GitHub. Bona i- .browserslistrc ukuze uthole imininingwane.

I-RTLCSS

I -Bootstrap isebenzisa i -RTLCSS ukuze icubungule i-CSS ehlanganisiwe futhi iyiguqulele ku-RTL - ngokuyisisekelo ishintsha izindawo eziqaphela isiqondiso esivundlile (isb. padding-left) ngokuphambana kwazo. Kusivumela ukuthi sibhale i-CSS yethu kanye kuphela futhi senze ama-tweaks amancane sisebenzisa ukulawula kwe -RTLCSS neziqondiso zenani .

Amadokhumenti wendawo

Ukuqalisa imibhalo yethu endaweni kudinga ukusetshenziswa kwe-Hugo, efakwa ngephakheji ye- hugo-bin npm. I-Hugo iyijeneretha yesayithi emile eshesha kakhulu futhi eyandiswa kakhulu esihlinzeka: okuyisisekelo kuhlanganisa, amafayela asekelwe ku-Markdown, izifanekiso, nokuningi. Nansi indlela yokuyiqalisa:

Sebenzisa ukusetha kwamathuluzi ngenhla ukuze ufake konke okuncikile.
Kusuka /bootstrapkumkhombandlela wezimpande, sebenzisa npm run docs-serveumugqa womyalo.
Vula http://localhost:9001/esipheqululini sakho, futhi voilà.

Funda kabanzi ngokusebenzisa i-Hugo ngokufunda imibhalo yayo .

Ukuxazulula inkinga

Uma kwenzeka uhlangabezana nezinkinga ngokufaka okuncikile, khipha zonke izinguqulo zangaphambilini zokuncika (ezomhlaba wonke nezasendaweni). Bese, phinda npm install.