Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
in English

Yɛ nnwinnade a wɔde bɛyɛ adwuma

Sua sɛnea wode Bootstrap no npm scripts a ɛka ho no bedi dwuma de akyekye yɛn nkrataa, aboaboa source code ano, ayɛ sɔhwɛ ahorow, ne nea ɛkeka ho.

Wɔ kratafa yi so

Nnwinnade nhyehyɛe

Bootstrap de npm scripts di dwuma ma ne dan nhyehyɛe no. Yɛn package.json no wɔ akwan a ɛyɛ mmerɛw a wɔfa so de framework no yɛ adwuma, a nea ɛka ho ne code a wɔbɛboaboa ano, sɔhwɛ ahorow a wɔde tu mmirika, ne nea ɛkeka ho.

Sɛ wode yɛn build system no bedi dwuma na woayɛ yɛn documentation no wɔ locally a, wubehia Bootstrap no source files ne Node no bi. Di anammɔn yi akyi na ɛsɛ sɛ woyɛ krado sɛ wobɛwosow:

  1. Twe na install Node.js , a yɛde di dwuma de hwɛ yɛn dependencies so.
  2. Twe Bootstrap no fibea ahorow anaasɛ fork Bootstrap no adekorabea .
  3. Kɔ root /bootstrapdirectory no so na tu mmirika npm installkɔ instɔl yɛn local dependencies a wɔakyerɛw wɔ package.json mu no.

Sɛ wowie a, wobɛtumi ayɛ ahyɛdeɛ ahodoɔ a wɔde ama no afiri ahyɛdeɛ kwan no so.

Npm nkyerɛwde a wɔde di dwuma

Yɛn package.json no wɔ nnwuma pii a yɛde bɛyɛ adwuma no. Tu mmirika npm runkɔhwɛ npm scripts no nyinaa wɔ wo terminal no mu. Nnwuma atitiriw no bi ne:

Adwuma Nkyerɛmu
npm start Ɔboaboa CSS ne JavaScript ano, ɛkyekyere nkrataa no, na ɛhyɛ local server ase.
npm run dist Ɔbɔ dist/daerekta no a fael ahorow a wɔaboaboa ano wom. Ɛhwehwɛ sɛ Sass , Autoprefixer , ne terser .
npm test Tu mmirika sɔhwɛ ahorow wɔ mpɔtam hɔ bere a watu mmirika awie nonpm run dist
npm run docs-serve Ɔkyekye na ɛyɛ nkrataa no wɔ mpɔtam hɔ.
Fi ase ne Bootstrap via npm ne yɛn starter project! Fa w’ani kyerɛ twbs/bootstrap-npm-starter template repository no mu kɔhwɛ sɛnea wobɛkyekye na woayɛ Bootstrap wɔ w’ankasa npm adwuma no mu. Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ne Bootstrap Ahyɛnsodeɛ ka ho.

Sass

Bootstrap de Dart Sass di dwuma de boaboa yɛn Sass fibea fael ahorow ano kɔ CSS fael ahorow mu (a ɛka yɛn adansi nhyehyɛe no ho), na yɛhyɛ nyansa sɛ wobɛyɛ saa ara sɛ wode w’ankasa agyapade pipeline reboaboa Sass ano a. Yɛde Node Sass dii dwuma kan ma Bootstrap v4, nanso LibSass ne packages a wɔasi wɔ so, a Node Sass ka ho, seesei wɔagyae .

Dart Sass de rounding precision a ɛyɛ 10 di dwuma na esiane sɛ ɛyɛ adwuma yiye nti, ɛmma kwan mma wɔnyɛ nsakrae wɔ saa botae yi mu. Yɛmfa saa pɛpɛɛpɛyɛ yi nkɔ fam bere a yɛreyɛ yɛn CSS a yɛayɛ no ho adwuma bio, te sɛ bere a yɛreyɛ minification no, nanso sɛ wopaw sɛ wobɛyɛ saa a yɛhyɛ nyansa sɛ anyɛ yiye koraa no, hwɛ pɛpɛɛpɛyɛ a ɛyɛ 6 so na asiw nsɛm a ɛfa browser rounding ho no ano.

Autoprefixer a wɔde di dwuma

Bootstrap de Autoprefixer (a ɛka yɛn adansi nhyehyɛe no ho) di dwuma de ankasa de vendor prefixes ka CSS agyapade binom ho wɔ ɔdansi bere mu. Saa a yɛyɛ no ma yɛkora yɛn bere ne koodu so denam ma a ɛma yetumi kyerɛw yɛn CSS no afã atitiriw prɛko pɛ bere a eyi hia a ɛho hia sɛ yɛde vendor mixins te sɛ nea wohu wɔ v3 no fi hɔ no so.

Yɛhwɛ browser ahorow a ɛnam Autoprefixer so boa no din so wɔ fael soronko bi mu wɔ yɛn GitHub adekorabea no mu. Hwɛ .browserslistrc ma nsɛm no mu nsɛm.

RTLCSS na ɛwɔ hɔ

Bootstrap de RTLCSS di dwuma de di CSS a wɔaboaboa ano no ho dwuma na ɛdan no kɔ RTL – titiriw no, padding-leftɛde nea ɛne no bɔ abira no si horizontal direction aware properties (eg. ) ananmu. Ɛma yɛn kwan ma yɛkyerɛw yɛn CSS no pɛnkoro pɛ na yɛyɛ tweaks nketenkete denam RTLCSS control ne value directives so.

Mpɔtam hɔ nkrataa a wɔakyerɛw

Yɛn nkrataa a yɛde bɛyɛ adwuma wɔ mpɔtam hɔ no hwehwɛ sɛ yɛde Hugo di dwuma, a ɛnam hugo-bin npm paket no so nya instɔlehyɛn. Hugo yɛ blazingly fast na koraa extensible static site generator a ɛma yɛn: mfitiaseɛ ka ho, Markdown-gyina fael, templates, ne nea ɛkeka ho. Ɔkwan a wobɛfa so afi ase ni:

  1. Run fa tooling setup a ɛwɔ atifi hɔ no mu na fa dependencies nyinaa hyɛ mu.
  2. Efi ntini /bootstrapkyerɛwtohɔ no mu, tu mmirika npm run docs-servewɔ ahyɛde kwan no mu.
  3. Bue http://localhost:9001/wɔ wo browser no mu, na voilà.

Sua pii fa Hugo a wode bedi dwuma ho denam ne nkrataa a wobɛkenkan no so .

Ɔhaw ahorow a wodi ho dwuma

Sɛ wohyia ɔhaw wɔ dependencies instɔlehyɛn mu a, yi dependency nkyerɛaseɛ a atwam no nyinaa (wiase nyinaa ne mpɔtam hɔ). Afei, san tu mmirika bio npm install.