Ga naar hoofdinhoud Ga naar navigatie in documenten
Check
in English

Aanpassen

Leer hoe u Bootstrap kunt thematiseren, aanpassen en uitbreiden met Sass, een zee van globale opties, een uitgebreid kleurensysteem en meer.

Sass Gebruik onze Sass-bronbestanden om te profiteren van variabelen, kaarten, mixins en functies.
Opties Pas Bootstrap aan met ingebouwde variabelen om gemakkelijk te schakelen tussen algemene CSS-voorkeuren.
Kleur Leer meer over en pas de kleursystemen aan die de volledige toolkit ondersteunen.
Componenten Leer hoe we bijna al onze componenten responsief bouwen en met basis- en modificatieklassen.
CSS-variabelen Gebruik de aangepaste CSS-eigenschappen van Bootstrap voor snel en toekomstgericht ontwerp en ontwikkeling.
Optimaliseren Houd uw projecten slank, responsief en onderhoudbaar, zodat u de beste ervaring kunt leveren.

Overzicht

Er zijn meerdere manieren om Bootstrap aan te passen. Uw beste pad kan afhangen van uw project, de complexiteit van uw build-tools, de versie van Bootstrap die u gebruikt, browserondersteuning en meer.

Onze twee voorkeursmethoden zijn:

  1. Bootstrap gebruiken via pakketbeheerder zodat u onze bronbestanden kunt gebruiken en uitbreiden.
  2. De gecompileerde distributiebestanden van Bootstrap of jsDelivr gebruiken , zodat u de stijlen van Bootstrap kunt toevoegen of negeren.

Hoewel we hier niet in details kunnen treden over het gebruik van elke pakketbeheerder, kunnen we wel wat richtlijnen geven voor het gebruik van Bootstrap met uw eigen Sass-compiler .

Voor degenen die de distributiebestanden willen gebruiken, raadpleegt u de startpagina voor het opnemen van die bestanden en een voorbeeld-HTML-pagina. Raadpleeg vanaf daar de documenten voor de lay-out, componenten en gedragingen die u wilt gebruiken.

Terwijl u vertrouwd raakt met Bootstrap, kunt u dit gedeelte verder verkennen voor meer informatie over het gebruik van onze algemene opties, het gebruik van en het wijzigen van ons kleursysteem, hoe we onze componenten bouwen, hoe u onze groeiende lijst met aangepaste CSS-eigenschappen gebruikt en hoe om uw code te optimaliseren bij het bouwen met Bootstrap.

CSP's en ingesloten SVG's

Verschillende Bootstrap-componenten bevatten ingesloten SVG's in onze CSS om componenten consistent en gemakkelijk op te maken voor verschillende browsers en apparaten. Voor organisaties met strengere CSP -configuraties hebben we alle instanties van onze ingesloten SVG's gedocumenteerd (die allemaal worden toegepast via background-image), zodat u uw opties grondiger kunt bekijken.

Op basis van gemeenschapsgesprekken zijn enkele opties om dit in uw eigen codebase aan te pakken het vervangen van de URL's door lokaal gehoste middelen , het verwijderen van de afbeeldingen en het gebruik van inline-afbeeldingen (niet mogelijk in alle componenten) en het wijzigen van uw CSP. Onze aanbeveling is om uw eigen beveiligingsbeleid zorgvuldig door te nemen en zo nodig te beslissen over de beste weg vooruit.