Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
in English

Bumuo ng mga tool

Matutunan kung paano gamitin ang mga kasamang npm script ng Bootstrap upang buuin ang aming dokumentasyon, i-compile ang source code, magpatakbo ng mga pagsubok, at higit pa.

Sa pahinang ito

Pag-setup ng tool

Gumagamit ang Bootstrap ng mga npm script para sa build system nito. Kasama sa aming package.json ang mga maginhawang pamamaraan para sa pagtatrabaho sa framework, kabilang ang pag-compile ng code, pagpapatakbo ng mga pagsubok, at higit pa.

Para magamit ang aming build system at lokal na patakbuhin ang aming dokumentasyon, kakailanganin mo ng kopya ng mga source file at Node ng Bootstrap. Sundin ang mga hakbang na ito at dapat ay handa ka nang mag-rock:

  1. I-download at i-install ang Node.js , na ginagamit namin upang pamahalaan ang aming mga dependency.
  2. Alinman sa i -download ang mga pinagmumulan ng Bootstrap o tinidor ang repositoryo ng Bootstrap .
  3. Mag-navigate sa root /bootstrapdirectory at tumakbo npm installpara i-install ang aming mga lokal na dependency na nakalista sa package.json .

Kapag nakumpleto na, magagawa mong patakbuhin ang iba't ibang mga command na ibinigay mula sa command line.

Gamit ang mga script ng npm

Kasama sa aming package.json ang maraming gawain para sa pagbuo ng proyekto. Patakbuhin npm runupang makita ang lahat ng mga script ng npm sa iyong terminal. Kabilang sa mga pangunahing gawain ang:

Gawain Paglalarawan
npm start Kino-compile ang CSS at JavaScript, bubuo ng dokumentasyon, at nagsisimula ng isang lokal na server.
npm run dist Lumilikha ng dist/direktoryo na may mga pinagsama-samang file. Nangangailangan ng Sass , Autoprefixer , at terser .
npm test Nagpapatakbo ng mga pagsubok nang lokal pagkatapos tumakbonpm run dist
npm run docs-serve Binubuo at pinapatakbo ang dokumentasyon nang lokal.
Magsimula sa Bootstrap sa pamamagitan ng npm gamit ang aming panimulang proyekto! Pumunta sa twbs/bootstrap-npm-starter template repository para makita kung paano bumuo at mag-customize ng Bootstrap sa sarili mong npm project. May kasamang Sass compiler, Autoprefixer, Stylelint, PurgeCSS, at Bootstrap Icon.

Sass

Gumagamit ang Bootstrap ng Dart Sass para sa pag-compile ng aming Sass source file sa mga CSS file (kasama sa aming proseso ng pagbuo), at inirerekomenda naming gawin mo rin ito kung kino-compile mo ang Sass gamit ang sarili mong asset pipeline. Ginamit namin dati ang Node Sass para sa Bootstrap v4, ngunit ang LibSass at mga package na binuo sa ibabaw nito, kasama ang Node Sass, ay hindi na ginagamit .

Gumagamit ang Dart Sass ng rounding precision na 10 at para sa kahusayan ay hindi pinapayagan ang pagsasaayos ng halagang ito. Hindi namin ibinababa ang katumpakan na ito sa panahon ng karagdagang pagpoproseso ng aming nabuong CSS, tulad ng sa panahon ng minification, ngunit kung pinili mong gawin ito, inirerekomenda namin ang pagpapanatili ng katumpakan ng hindi bababa sa 6 upang maiwasan ang mga isyu sa pag-round ng browser.

Autoprefixer

Gumagamit ang Bootstrap ng Autoprefixer (kasama sa aming proseso ng pagbuo) upang awtomatikong magdagdag ng mga prefix ng vendor sa ilang mga katangian ng CSS sa oras ng pagbuo. Ang paggawa nito ay nakakatipid sa amin ng oras at code sa pamamagitan ng pagpapahintulot sa amin na magsulat ng mga mahahalagang bahagi ng aming CSS nang isang beses habang inaalis ang pangangailangan para sa mga mixin ng vendor tulad ng makikita sa v3.

Pinapanatili namin ang listahan ng mga browser na sinusuportahan sa pamamagitan ng Autoprefixer sa isang hiwalay na file sa loob ng aming GitHub repository. Tingnan ang .browserslistrc para sa mga detalye.

RTLCSS

Gumagamit ang Bootstrap ng RTLCSS upang iproseso ang pinagsama-samang CSS at i-convert ang mga ito sa RTL – karaniwang pinapalitan ang mga katangian ng pahalang na direksyon (hal. padding-left) ng kabaligtaran ng mga ito. Nagbibigay-daan ito sa amin na isulat lamang ang aming CSS nang isang beses at gumawa ng maliliit na pag-aayos gamit ang kontrol ng RTLCSS at mga direktiba sa halaga .

Lokal na dokumentasyon

Ang pagpapatakbo ng aming dokumentasyon nang lokal ay nangangailangan ng paggamit ng Hugo, na na-install sa pamamagitan ng hugo-bin npm package. Ang Hugo ay isang napakabilis at medyo napapalawak na static na site generator na nagbibigay sa amin ng: basic na kinabibilangan, Markdown-based na mga file, template, at higit pa. Narito kung paano ito sisimulan:

  1. Patakbuhin ang tooling setup sa itaas upang i-install ang lahat ng dependencies.
  2. Mula sa root /bootstrapdirectory, tumakbo npm run docs-servesa command line.
  3. Buksan http://localhost:9001/sa iyong browser, at voilà.

Matuto nang higit pa tungkol sa paggamit ng Hugo sa pamamagitan ng pagbabasa ng dokumentasyon nito .

Pag-troubleshoot

Kung makatagpo ka ng mga problema sa pag-install ng mga dependency, i-uninstall ang lahat ng nakaraang bersyon ng dependency (global at lokal). Pagkatapos, muling ipalabas npm install.