Bidra

Hjälp till att utveckla Bootstrap med våra dokumentationsbyggande skript och tester.

På den här sidan

Verktygsinställning

Bootstrap använder npm-skript för att bygga dokumentationen och kompilera källfiler. Vår package.json innehåller dessa skript för att kompilera kod, köra tester och mer. Dessa är inte avsedda för användning utanför vårt arkiv och vår dokumentation.

För att använda vårt byggsystem och köra vår dokumentation lokalt behöver du en kopia av Bootstraps källfiler och Node. Följ dessa steg och du bör vara redo att rocka:

Ladda ner och installera Node.js , som vi använder för att hantera våra beroenden.
Hämta antingen Bootstraps källor eller dela Bootstraps arkiv .
Navigera till rotkatalogen /bootstrapoch kör npm installför att installera våra lokala beroenden som anges i package.json .

När du är klar kommer du att kunna köra de olika kommandona från kommandoraden.

Använder npm-skript

Vår package.json innehåller många uppgifter för att utveckla projektet. Kör npm runför att se alla npm-skript i din terminal. Primära arbetsuppgifter inkluderar:

Uppgift	Beskrivning
`npm start`	Kompilerar CSS och JavaScript, bygger dokumentationen och startar en lokal server.
`npm run dist`	Skapar `dist/`katalogen med kompilerade filer. Använder Sass , Autoprefixer och terser .
`npm test`	Kör tester lokalt efter körning`npm run dist`
`npm run docs-serve`	Bygger och kör dokumentationen lokalt.

Kom igång med Bootstrap via npm med vårt startprojekt! Gå till mallförrådet twbs/bootstrap-npm-starter för att se hur du bygger och anpassar Bootstrap i ditt eget npm-projekt. Inkluderar Sass-kompilator, Autoprefixer, Stylelint, PurgeCSS och Bootstrap-ikoner.

Sass

Bootstrap använder Dart Sass för att kompilera våra Sass-källfiler till CSS-filer (ingår i vår byggprocess), och vi rekommenderar att du gör detsamma om du kompilerar Sass med din egen tillgångspipeline. Vi använde tidigare Node Sass för Bootstrap v4, men LibSass och paket som byggts ovanpå det, inklusive Node Sass, är nu utfasade .

Dart Sass använder en avrundningsprecision på 10 och tillåter av effektivitetsskäl inte justering av detta värde. Vi sänker inte denna precision under vidare bearbetning av vår genererade CSS, till exempel under minifiering, men om du väljer att göra det rekommenderar vi att du bibehåller en precision på minst 6 för att förhindra problem med webbläsaravrundning.

Autoprefixer

Bootstrap använder Autoprefixer (ingår i vår byggprocess) för att automatiskt lägga till leverantörsprefix till vissa CSS-egenskaper vid byggtiden. Genom att göra det sparar vi tid och kod genom att tillåta oss att skriva viktiga delar av vår CSS en gång samtidigt som vi eliminerar behovet av leverantörsmixins som de som finns i v3.

Vi upprätthåller listan över webbläsare som stöds av Autoprefixer i en separat fil i vårt GitHub-förråd. Se .browserslistrc för detaljer.

RTLCSS

Bootstrap använder RTLCSS för att bearbeta kompilerad CSS och konvertera dem till RTL – i princip ersätter horisontella riktningsmedvetna egenskaper (t.ex. padding-left) med deras motsats. Det låter oss bara skriva vår CSS en enda gång och göra mindre justeringar med hjälp av RTLCSS -kontroll- och värdedirektiv .

Lokal dokumentation

Att köra vår dokumentation lokalt kräver användning av Hugo, som installeras via hugo-bin npm-paketet. Hugo är en blixtsnabb och ganska utbyggbar statisk webbplatsgenerator som ger oss: grundläggande inkluderar, Markdown-baserade filer, mallar och mer. Så här kommer du igång:

Kör igenom verktygsinställningarna ovan för att installera alla beroenden.
Kör på kommandoraden från /bootstraprotkatalogen .npm run docs-serve
Öppna http://localhost:9001/i din webbläsare och voilà.

Lär dig mer om hur du använder Hugo genom att läsa dess dokumentation .

Felsökning

Om du skulle stöta på problem med att installera beroenden, avinstallera alla tidigare beroendeversioner (globala och lokala). Kör sedan igen npm install.