Zum Hauptinhalt springen Zur Dokumentennavigation springen
in English

Anpassen

Erfahren Sie, wie Sie Bootstrap mit Sass thematisieren, anpassen und erweitern, eine Schiffsladung globaler Optionen, ein umfangreiches Farbsystem und mehr.

Sass Nutzen Sie unsere Sass-Quelldateien, um Variablen, Maps, Mixins und Funktionen zu nutzen.
Optionen Passen Sie Bootstrap mit integrierten Variablen an, um globale CSS-Einstellungen einfach umzuschalten.
Farbe Erfahren Sie mehr über die Farbsysteme, die das gesamte Toolkit unterstützen, und passen Sie sie an.
Komponenten Erfahren Sie, wie wir fast alle unsere Komponenten responsiv und mit Basis- und Modifikatorklassen erstellen.
CSS-Variablen Verwenden Sie die benutzerdefinierten CSS-Eigenschaften von Bootstrap für schnelles und zukunftsorientiertes Design und Entwicklung.
Optimieren Halten Sie Ihre Projekte schlank, reaktionsschnell und wartbar, damit Sie die beste Erfahrung liefern können.

Überblick

Es gibt mehrere Möglichkeiten, Bootstrap anzupassen. Ihr bester Weg kann von Ihrem Projekt, der Komplexität Ihrer Build-Tools, der von Ihnen verwendeten Bootstrap-Version, der Browserunterstützung und mehr abhängen.

Unsere beiden bevorzugten Methoden sind:

  1. Verwenden von Bootstrap über den Paketmanager, damit Sie unsere Quelldateien verwenden und erweitern können.
  2. Verwenden Sie die kompilierten Distributionsdateien von Bootstrap oder jsDelivr , damit Sie Bootstrap-Stile hinzufügen oder überschreiben können.

Obwohl wir hier nicht ins Detail gehen können, wie Sie jeden Paketmanager verwenden, können wir einige Hinweise zur Verwendung von Bootstrap mit Ihrem eigenen Sass-Compiler geben .

Wenn Sie die Distributionsdateien verwenden möchten, sehen Sie sich die Seite „Erste Schritte“ an, um zu erfahren, wie Sie diese Dateien und eine Beispiel-HTML-Seite einbinden können. Konsultieren Sie von dort aus die Dokumentation für das Layout, die Komponenten und das Verhalten, das Sie verwenden möchten.

Während Sie sich mit Bootstrap vertraut machen, erkunden Sie diesen Abschnitt weiter, um weitere Einzelheiten darüber zu erfahren, wie Sie unsere globalen Optionen nutzen, unser Farbsystem verwenden und ändern, wie wir unsere Komponenten erstellen, wie Sie unsere wachsende Liste benutzerdefinierter CSS-Eigenschaften verwenden und wie um Ihren Code beim Erstellen mit Bootstrap zu optimieren.

CSPs und eingebettete SVGs

Mehrere Bootstrap-Komponenten enthalten eingebettete SVGs in unserem CSS, um Komponenten konsistent und einfach über Browser und Geräte hinweg zu gestalten. Für Organisationen mit strengeren CSP - Konfigurationen haben wir alle Instanzen unserer eingebetteten SVGs dokumentiert (die alle über angewendet werden background-image), damit Sie Ihre Optionen gründlicher prüfen können.

Basierend auf Community-Konversationen umfassen einige Optionen, um dies in Ihrer eigenen Codebasis anzugehen, das Ersetzen der URLs durch lokal gehostete Assets, das Entfernen der Bilder und die Verwendung von Inline-Bildern (nicht in allen Komponenten möglich) und das Ändern Ihres CSP. Wir empfehlen, Ihre eigenen Sicherheitsrichtlinien sorgfältig zu überprüfen und gegebenenfalls den besten Weg nach vorne zu finden.