in English

Adeiladu offer

Dysgwch sut i ddefnyddio sgriptiau npm wedi'u cynnwys gan Bootstrap i adeiladu ein dogfennaeth, llunio cod ffynhonnell, cynnal profion, a mwy.

Ar y dudalen hon

Gosodiad offer

Mae Bootstrap yn defnyddio sgriptiau npm ar gyfer ei system adeiladu. Mae ein pecyn.json yn cynnwys dulliau cyfleus ar gyfer gweithio gyda'r fframwaith, gan gynnwys llunio cod, rhedeg profion, a mwy.

I ddefnyddio ein system adeiladu a rhedeg ein dogfennaeth yn lleol, bydd angen copi o ffeiliau ffynhonnell Bootstrap a Node arnoch. Dilynwch y camau hyn a dylech fod yn barod i siglo:

Lawrlwythwch a gosodwch Node.js , a ddefnyddiwn i reoli ein dibyniaethau.
Naill ai lawrlwythwch ffynonellau Bootstrap neu fforchiwch ystorfa Bootstrap .
Llywiwch i'r /bootstrapcyfeiriadur gwraidd a rhedeg npm installi osod ein dibyniaethau lleol a restrir yn package.json .

Ar ôl ei gwblhau, byddwch yn gallu rhedeg y gwahanol orchmynion a ddarperir o'r llinell orchymyn.

Defnyddio sgriptiau npm

Mae ein pecyn.json yn cynnwys nifer o dasgau ar gyfer datblygu'r prosiect. Rhedeg npm runi weld yr holl sgriptiau npm yn eich terfynell. Mae tasgau cynradd yn cynnwys:

Tasg	Disgrifiad
`npm start`	Yn llunio CSS a JavaScript, yn adeiladu'r ddogfennaeth, ac yn cychwyn gweinydd lleol.
`npm run dist`	Yn creu'r `dist/`cyfeiriadur gyda ffeiliau wedi'u llunio. Angen Sass , Autoprefixer , a terser .
`npm test`	Yn rhedeg profion yn lleol ar ôl rhedeg`npm run dist`
`npm run docs-serve`	Adeiladu a rhedeg y ddogfennaeth yn lleol.

Dechreuwch gyda Bootstrap trwy npm gyda'n prosiect cychwynnol! Ewch i ystorfa templedi twbs/bootstrap-npm-starter i weld sut i adeiladu ac addasu Bootstrap yn eich prosiect npm eich hun. Yn cynnwys Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ac Eiconau Bootstrap.

Sass

Mae Bootstrap yn defnyddio Dart Sass ar gyfer crynhoi ein ffeiliau ffynhonnell Sass yn ffeiliau CSS (wedi'u cynnwys yn ein proses adeiladu), ac rydym yn argymell eich bod yn gwneud yr un peth os ydych chi'n llunio Sass gan ddefnyddio'ch piblinell asedau eich hun. Yn flaenorol, gwnaethom ddefnyddio Node Sass ar gyfer Bootstrap v4, ond mae LibSass a phecynnau a adeiladwyd ar ei ben, gan gynnwys Node Sass, bellach yn anghymeradwy .

Mae Dart Sass yn defnyddio trachywiredd talgrynnu o 10 ac am resymau effeithlonrwydd nid yw'n caniatáu addasu'r gwerth hwn. Nid ydym yn lleihau'r manwl gywirdeb hwn wrth brosesu'r CSS a gynhyrchir gennym ymhellach, megis yn ystod y minio, ond os dewiswch wneud hynny rydym yn argymell cadw o leiaf 6 manwl gywirdeb i atal problemau gyda thalgrynnu porwr.

Autoprefixer

Mae Bootstrap yn defnyddio Autoprefixer (wedi'i gynnwys yn ein proses adeiladu) i ychwanegu rhagddodiaid gwerthwyr yn awtomatig i rai eiddo CSS ar amser adeiladu. Mae gwneud hynny yn arbed amser a chod i ni trwy ganiatáu i ni ysgrifennu rhannau allweddol o'n CSS un tro tra'n dileu'r angen am gymysgeddau gwerthwyr fel y rhai a geir yn v3.

Rydym yn cynnal y rhestr o borwyr a gefnogir trwy Autoprefixer mewn ffeil ar wahân yn ein cadwrfa GitHub. Gweler .browserslistrc am fanylion.

RTLCSS

Mae Bootstrap yn defnyddio RTLCSS i brosesu CSS wedi'i lunio a'u trosi i RTL - yn y bôn gan ddisodli eiddo sy'n ymwybodol o gyfeiriad llorweddol (ee. padding-left) gyda'u gwrthwyneb. Mae'n caniatáu inni ysgrifennu ein CSS un tro yn unig a gwneud mân newidiadau gan ddefnyddio cyfarwyddebau rheoli a gwerth RTLCSS .

Dogfennaeth leol

Er mwyn rhedeg ein dogfennaeth yn lleol mae angen defnyddio Hugo, sy'n cael ei osod trwy'r pecyn hugo-bin npm. Mae Hugo yn gynhyrchydd gwefan sefydlog syfrdanol o gyflym ac eithaf estynadwy sy'n darparu i ni: sylfaenol yn cynnwys, ffeiliau yn seiliedig ar Markdown, templedi, a mwy. Dyma sut i roi cychwyn arni:

Rhedwch trwy'r gosodiad offer uchod i osod pob dibyniaeth.
From the root /bootstrap directory, run npm run docs-serve in the command line.
Open http://localhost:9001/ in your browser, and voilà.

Learn more about using Hugo by reading its documentation.

Troubleshooting

Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun npm install.