Hoppa till huvudinnehållet Hoppa till dokumentnavigering
in English

Anpassa

Lär dig hur du tematiserar, anpassar och utökar Bootstrap med Sass, en mängd globala alternativ, ett expansivt färgsystem och mer.

Sass Använd våra Sass-källfiler för att dra fördel av variabler, kartor, mixins och funktioner.
alternativ Anpassa Bootstrap med inbyggda variabler för att enkelt växla globala CSS-inställningar.
Färg Lär dig om och anpassa färgsystemen som stöder hela verktygslådan.
Komponenter Lär dig hur vi bygger nästan alla våra komponenter responsivt och med bas- och modifieringsklasser.
CSS-variabler Använd Bootstraps anpassade CSS-egenskaper för snabb och framåtblickande design och utveckling.
Optimera Håll dina projekt smidiga, lyhörda och underhållbara så att du kan leverera den bästa upplevelsen.

Översikt

Det finns flera sätt att anpassa Bootstrap. Din bästa väg kan bero på ditt projekt, komplexiteten hos dina byggverktyg, vilken version av Bootstrap du använder, webbläsarstöd och mer.

Våra två föredragna metoder är:

  1. Använder Bootstrap via pakethanteraren så att du kan använda och utöka våra källfiler.
  2. Använd Bootstraps kompilerade distributionsfiler eller jsDelivr så att du kan lägga till eller åsidosätta Bootstraps stilar.

Även om vi inte kan gå in på detaljer här om hur man använder varje pakethanterare, kan vi ge lite vägledning om hur du använder Bootstrap med din egen Sass-kompilator .

För de som vill använda distributionsfilerna, gå igenom startsidan för att inkludera dessa filer och ett exempel på HTML-sida. Därifrån, konsultera dokumenten för layout, komponenter och beteenden du vill använda.

När du bekantar dig med Bootstrap, fortsätt att utforska det här avsnittet för mer information om hur du använder våra globala alternativ, använder och ändrar vårt färgsystem, hur vi bygger våra komponenter, hur du använder vår växande lista med anpassade CSS-egenskaper och hur för att optimera din kod när du bygger med Bootstrap.

CSP:er och inbäddade SVG:er

Flera Bootstrap-komponenter inkluderar inbäddade SVG:er i vår CSS för att utforma komponenter konsekvent och enkelt över webbläsare och enheter. För organisationer med mer strikta CSP- konfigurationer har vi dokumenterat alla instanser av våra inbäddade SVG:er (som alla tillämpas via background-image) så att du kan granska dina alternativ mer noggrant.

Baserat på gemenskapskonversation inkluderar några alternativ för att ta itu med detta i din egen kodbas att ersätta webbadresserna med lokalt värdbaserade tillgångar, ta bort bilderna och använda inline-bilder (inte möjligt i alla komponenter) och modifiera din CSP. Vår rekommendation är att noggrant granska din egen säkerhetspolicy och besluta om den bästa vägen framåt, om det behövs.