Boa

Boa ma ɛnyɛ Bootstrap ne yɛn nkrataa a wɔde si scripts ne sɔhwɛ ahorow.

Wɔ kratafa yi so

Nnwinnade nhyehyɛe

Bootstrap de npm scripts di dwuma de kyekyere nkrataa no na ɛboaboa fibea fael ahorow ano. Yɛn package.json no kura saa scripts yi a wɔde bɛboaboa code ano, ayɛ sɔhwɛ ahorow, ne nea ɛkeka ho. Eyinom nyɛ nea wɔayɛ sɛ wɔde bedi dwuma wɔ yɛn adekorabea ne nkrataa akyi.

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:

Twe na install Node.js , a yɛde di dwuma de hwɛ yɛn dependencies so.
Twe Bootstrap no fibea ahorow anaasɛ fork Bootstrap no adekorabea .
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. Ɔde Sass , Autoprefixer , ne terser di dwuma .
`npm test`	Tu mmirika sɔhwɛ ahorow wɔ mpɔtam hɔ bere a watu mmirika awie no`npm 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 mu – titiriw no, ɛde nea ɛne no bɔ abira no si horizontal direction aware properties (sɛ nhwɛso no padding-left) 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:

Run fa tooling setup a ɛwɔ atifi hɔ no mu na fa dependencies nyinaa hyɛ mu.
Efi ntini /bootstrapkyerɛwtohɔ no mu, tu mmirika npm run docs-servewɔ ahyɛde kwan no mu.
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.