Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
Check
in English

Mag-ambag

Tumulong na bumuo ng Bootstrap gamit ang aming dokumentasyong bumuo ng mga script at pagsubok.

Sa pahinang ito

Pag-setup ng tool

Gumagamit ang Bootstrap ng mga npm script para buuin ang dokumentasyon at mag-compile ng mga source file. Ang aming package.json ay naglalaman ng mga script na ito para sa pag-compile ng code, pagpapatakbo ng mga pagsubok, at higit pa. Ang mga ito ay hindi nilayon para sa paggamit sa labas ng aming repositoryo at dokumentasyon.

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. Gumagamit 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 pahalang na direksyon ng kamalayan na mga katangian (hal. padding-left) sa kanilang kabaligtaran. 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 kay 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.