Aanpassen
Leer hoe je Bootstrap van een thema voorziet, aanpast en uitbreidt met Sass, een schat aan globale opties, een uitgebreid kleursysteem en meer.
Overzicht
Er zijn meerdere manieren om Bootstrap aan te passen. Welke route het beste is, hangt af van je project, de complexiteit van je buildtools, de versie van Bootstrap die je gebruikt, browserondersteuning en meer.
Onze twee voorkeursmethoden zijn:
- Bootstrap via een package manager gebruiken, zodat je onze bronbestanden kunt gebruiken en uitbreiden.
- De gecompileerde distributiebestanden van Bootstrap of jsDelivr gebruiken, zodat je stijlen van Bootstrap kunt aanvullen of overschrijven.
Hoewel we hier niet in detail kunnen ingaan op het gebruik van elke package manager, kunnen we wel wat richting geven bij het gebruik van Bootstrap met je eigen Sass-compiler.
Wil je de distributiebestanden gebruiken, bekijk dan de introductiepagina voor hoe je die bestanden opneemt en voor een voorbeeld-HTML-pagina. Raadpleeg daarna de documentatie voor de layout, componenten en gedragingen die je wilt gebruiken.
Naarmate je bekend raakt met Bootstrap, kun je deze sectie verder verkennen voor meer details over het benutten van onze globale opties, het gebruiken en wijzigen van ons kleursysteem, hoe we onze componenten bouwen, hoe je onze groeiende lijst CSS custom properties gebruikt en hoe je je code optimaliseert wanneer je met Bootstrap bouwt.
CSP's en ingesloten SVG's
Verschillende Bootstrap-componenten bevatten ingesloten SVG's in onze CSS, om componenten consistent en eenvoudig op te maken in verschillende browsers en op verschillende apparaten. Voor organisaties met striktere CSP-configuraties hebben we alle plekken met ingesloten SVG's gedocumenteerd (die allemaal via background-image worden toegepast), zodat je je opties grondiger kunt afwegen.
- Accordion
- Carousel-bedieningselementen
- Close button (gebruikt in alerts en modals)
- Selectievakjes en radioknoppen in formulieren
- Formulierschakelaars
- Validatie-iconen in formulieren
- Toggle-knoppen van de navbar
- Selectiemenu's
Op basis van gesprekken in de community zijn er in je eigen codebase onder meer deze opties: de URL's vervangen door lokaal gehoste assets, de afbeeldingen verwijderen en inline afbeeldingen gebruiken (niet mogelijk bij alle componenten), en je CSP aanpassen. Ons advies is om je eigen beveiligingsbeleid zorgvuldig te bekijken en, indien nodig, te bepalen wat de beste weg vooruit is.