Gå til hovedinnhold Hopp til dokumentnavigering
Check
in English

Bidra

Hjelp med å utvikle Bootstrap med dokumentasjonsbyggingsskriptene og testene våre.

På denne siden

Verktøyoppsett

Bootstrap bruker npm-skript for å bygge dokumentasjonen og kompilere kildefiler. Vår package.json inneholder disse skriptene for å kompilere kode, kjøre tester og mer. Disse er ikke ment for bruk utenfor vårt depot og dokumentasjon.

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. Bruker 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 vår CSS én gang og gjøre mindre justeringer ved å bruke RTLCSS - kontroll- og verdidirektiver .

Lokal dokumentasjon

Å kjøre dokumentasjonen lokalt krever bruk av Hugo, som installeres 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.