in English

Mbangun alat

Sinau carane nggunakake skrip npm sing kalebu Bootstrap kanggo mbangun dokumentasi, ngumpulake kode sumber, tes mbukak, lan liya-liyane.

Ing kaca iki

Persiyapan perkakas

Bootstrap nggunakake skrip npm kanggo sistem mbangun. Package.json kita kalebu cara sing trep kanggo nggarap kerangka, kalebu kode kompilasi, tes sing mlaku, lan liya-liyane.

Kanggo nggunakake sistem mbangun lan mbukak dokumentasi lokal, sampeyan butuh salinan file sumber Bootstrap lan Node. Tindakake langkah iki lan sampeyan kudu siap kanggo rock:

Ngundhuh lan nginstal Node.js , sing digunakake kanggo ngatur dependensi kita.
Ngundhuh sumber Bootstrap utawa garpu gudang Bootstrap .
/bootstrapNavigasi menyang direktori root lan mbukak npm installkanggo nginstal dependensi lokal sing kadhaptar ing package.json .

Yen wis rampung, sampeyan bakal bisa mbukak macem-macem printah sing kasedhiya saka baris printah.

Nggunakake skrip npm

Package.json kita kalebu akeh tugas kanggo ngembangake proyek kasebut. Mbukak npm runkanggo ndeleng kabeh skrip npm ing terminal sampeyan. Tugas utama kalebu:

tugas	Katrangan
`npm start`	Kompilasi CSS lan JavaScript, mbangun dokumentasi, lan miwiti server lokal.
`npm run dist`	Nggawe `dist/`direktori kanthi file sing dikompilasi. Mbutuhake Sass , Autoprefixer , lan terser .
`npm test`	Nglakokake tes sacara lokal sawise mlaku`npm run dist`
`npm run docs-serve`	Mbangun lan mbukak dokumentasi lokal.

Miwiti Bootstrap liwat npm karo proyek wiwitan kita! Pindhah menyang repositori template twbs/bootstrap-npm-starter kanggo ndeleng carane mbangun lan ngatur Bootstrap ing proyek npm sampeyan dhewe. Kalebu kompiler Sass, Autoprefixer, Stylelint, PurgeCSS, lan Ikon Bootstrap.

Sass

Bootstrap nggunakake Dart Sass kanggo ngumpulake file sumber Sass menyang file CSS (kalebu ing proses mbangun), lan disaranake sampeyan nindakake perkara sing padha yen sampeyan nyusun Sass nggunakake pipa aset sampeyan dhewe. Kita sadurunge nggunakake Node Sass kanggo Bootstrap v4, nanging LibSass lan paket sing dibangun ing ndhuwur, kalebu Node Sass, saiki wis ora digunakake .

Dart Sass nggunakake tliti babak 10 lan kanggo alasan efficiency ora ngidini imbuhan saka Nilai iki. Kita ora ngedhunake presisi iki sajrone proses luwih lanjut saka CSS sing digawe, kayata nalika minifikasi, nanging yen sampeyan milih nglakoni, disaranake njaga presisi paling sethithik 6 kanggo nyegah masalah karo pembulatan browser.

Autoprefixer

Bootstrap nggunakake Autoprefixer (kalebu ing proses mbangun kita) kanggo nambahake awalan vendor kanthi otomatis menyang sawetara properti CSS nalika mbangun. Mengkono ngirit wektu lan kode kanthi ngidini kita nulis bagean-bagean penting saka CSS kita siji-sijine nalika ngilangi kabutuhan mixin vendor kaya sing ditemokake ing v3.

Kita njaga dhaptar browser sing didhukung liwat Autoprefixer ing file sing kapisah ing repositori GitHub. Waca .browserslistrc kanggo rincian.

RTLCSS

Bootstrap nggunakake RTLCSS kanggo ngolah CSS sing dikompilasi lan ngowahi dadi RTL - biasane ngganti sifat sadar arah horisontal (eg. padding-left) Kanthi ngelawan. Ngidini kita mung nulis CSS siji-sijine lan nggawe njiwet cilik nggunakake kontrol RTLCSS lan arahan nilai .

Dokumentasi lokal

Nglakokake dokumentasi kita sacara lokal mbutuhake panggunaan Hugo, sing bakal diinstal liwat paket npm hugo-bin . Hugo minangka generator situs statis sing cepet banget lan cukup extensible sing nyedhiyakake: dhasar kalebu, file basis Markdown, template, lan liya-liyane. Mangkene carane miwiti:

Bukak persiyapan perkakas ing ndhuwur kanggo nginstal kabeh dependensi.
/bootstrapSaka direktori root , mbukak npm run docs-serveing baris printah.
Bukak http://localhost:9001/ing browser sampeyan, lan voilà.

Sinau luwih lengkap babagan nggunakake Hugo kanthi maca dokumentasi .

Ngatasi masalah

Yen sampeyan nemoni masalah nalika nginstal dependensi, instal kabeh versi dependensi sadurunge (global lan lokal). Banjur, mbukak maneh npm install.