Gå til hovedinnhold Hopp til dokumentnavigering
in English

Bygg verktøy

Lær hvordan du bruker Bootstraps inkluderte npm-skript for å bygge vår dokumentasjon, kompilere kildekode, kjøre tester og mer.

På denne siden

Verktøyoppsett

Bootstrap bruker npm-skript for byggesystemet sitt. Vår package.json inkluderer praktiske metoder for å jobbe med rammeverket, inkludert kompilering av kode, kjøring av tester og mer.

For å bruke byggesystemet vårt og kjøre dokumentasjonen lokalt, trenger du en kopi av Bootstraps kildefiler og Node. Følg disse trinnene og du bør være klar til å rocke:

  1. Last ned og installer Node.js , som vi bruker til å administrere avhengighetene våre.
  2. Enten last ned Bootstraps kilder eller fordel Bootstraps depot .
  3. Naviger til rotkatalogen /bootstrapog kjør npm installfor å installere våre lokale avhengigheter oppført i package.json .

Når du er ferdig, vil du kunne kjøre de forskjellige kommandoene fra kommandolinjen.

Bruker npm-skript

Vår package.json inkluderer en rekke oppgaver for å utvikle prosjektet. Kjør npm runfor å se alle npm-skriptene i terminalen din. Primære oppgaver inkluderer:

Oppgave Beskrivelse
npm start Kompilerer CSS og JavaScript, bygger dokumentasjonen og starter en lokal server.
npm run dist Oppretter dist/katalogen med kompilerte filer. Krever Sass , Autoprefixer og terser .
npm test Kjører tester lokalt etter kjøringnpm run dist
npm run docs-serve Bygger og kjører dokumentasjonen lokalt.
Kom i gang med Bootstrap via npm med vårt startprosjekt! Gå til twbs/bootstrap-npm-starter-mallageret for å se hvordan du bygger og tilpasser Bootstrap i ditt eget npm-prosjekt. Inkluderer Sass-kompilator, Autoprefixer, Stylelint, PurgeCSS og Bootstrap-ikoner.

Sass

Bootstrap bruker Dart Sass for å kompilere Sass-kildefilene våre til CSS-filer (inkludert i byggeprosessen vår), og vi anbefaler at du gjør det samme hvis du kompilerer Sass ved å bruke din egen eiendelspipeline. Vi brukte tidligere Node Sass for Bootstrap v4, men LibSass og pakker bygget på toppen av den, inkludert Node Sass, er nå avviklet .

Dart Sass bruker en avrundingspresisjon på 10 og tillater av effektivitetsgrunner ikke justering av denne verdien. Vi senker ikke denne presisjonen under videre behandling av vår genererte CSS, for eksempel under minifisering, men hvis du velger å gjøre det, anbefaler vi å opprettholde en presisjon på minst 6 for å forhindre problemer med nettleseravrunding.

Autoprefikser

Bootstrap bruker Autoprefixer (inkludert i byggeprosessen vår) for automatisk å legge til leverandørprefikser til noen CSS-egenskaper ved byggetidspunktet. Å gjøre det sparer oss for tid og kode ved å la oss skrive viktige deler av CSS-en vår én gang, samtidig som vi eliminerer behovet for leverandørmikser som de som finnes i v3.

Vi opprettholder listen over nettlesere som støttes gjennom Autoprefixer i en egen fil i vårt GitHub-lager. Se .browserslistrc for detaljer.

RTLCSS

Bootstrap bruker RTLCSS til å behandle kompilerte CSS og konvertere dem til RTL – i utgangspunktet erstatter horisontal retningsbevisste egenskaper (f.eks. padding-left) med deres motsatte. Det lar oss bare skrive CSS en enkelt gang og gjøre mindre justeringer ved å bruke RTLCSS - kontroll- og verdidirektiver .

Lokal dokumentasjon

Å kjøre dokumentasjonen lokalt krever bruk av Hugo, som blir installert via hugo-bin npm-pakken. Hugo er en lynrask og ganske utvidbar statisk nettstedgenerator som gir oss: grunnleggende inkluderer, Markdown-baserte filer, maler og mer. Slik kommer du i gang:

  1. Kjør gjennom verktøyoppsettet ovenfor for å installere alle avhengigheter.
  2. Fra rotkatalogen /bootstrap, kjør npm run docs-servepå kommandolinjen.
  3. Åpne http://localhost:9001/i nettleseren din, og voilà.

Lær mer om bruk av Hugo ved å lese dokumentasjonen .

Feilsøking

Skulle du støte på problemer med å installere avhengigheter, avinstaller alle tidligere avhengighetsversjoner (globale og lokale). Kjør deretter på nytt npm install.