in English

Farbe

Bootstrap wird von einem umfangreichen Farbsystem unterstützt, das unsere Stile und Komponenten thematisiert. Dies ermöglicht eine umfassendere Anpassung und Erweiterung für jedes Projekt.

Auf dieser Seite

Themenfarben

Wir verwenden eine Teilmenge aller Farben, um eine kleinere Farbpalette zum Generieren von Farbschemata zu erstellen, die auch als Sass-Variablen und eine Sass-Karte in der Bootstrap- scss/_variables.scssDatei verfügbar sind.

Primär

Sekundär

Erfolg

Achtung

Warnung

Die Info

Licht

Dunkel

Alle diese Farben sind als Sass-Map erhältlich $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Sehen Sie sich unsere Dokumente zu Sass-Maps und Loops an, um zu erfahren , wie Sie diese Farben ändern können.

Alle Farben

Alle Bootstrap-Farben sind als Sass-Variablen und als Sass-Map in einer scss/_variables.scssDatei verfügbar. Um erhöhte Dateigrößen zu vermeiden, erstellen wir keine Text- oder Hintergrundfarbklassen für jede dieser Variablen. Stattdessen wählen wir eine Teilmenge dieser Farben für eine Themenpalette .

Achten Sie beim Anpassen der Farben auf die Kontrastverhältnisse. Wie unten gezeigt, haben wir jeder der Hauptfarben drei Kontrastverhältnisse hinzugefügt – eines für die aktuellen Farben des Farbfelds, eines für Weiß und eines für Schwarz.

$blau#0d6efd

$blau-100

$blau-200

$blau-300

$blau-400

$blau-500

$blau-600

$blau-700

$blau-800

$blau-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$lila#6f42c1

$lila-100

$lila-200

$lila-300

$lila-400

$lila-500

$lila-600

$lila-700

$lila-800

$lila-900

$pink#d63384

$pink-100

$pink-200

$pink-300

$pink-400

$pink-500

$pink-600

$pink-700

$pink-800

$pink-900

$rot#dc3545

$rot-100

$rot-200

$rot-300

$rot-400

$rot-500

$rot-600

$rot-700

$rot-800

$rot-900

$orange#fd7e14

$orange-100

$orange-200

$orange-300

$orange-400

$orange-500

$orange-600

$orange-700

$orange-800

$orange-900

$gelb#ffc107

$gelb-100

$gelb-200

$gelb-300

$gelb-400

$gelb-500

$gelb-600

$gelb-700

$gelb-800

$gelb-900

$grün#198754

$grün-100

$grün-200

$grün-300

$grün-400

$grün-500

$grün-600

$grün-700

$grün-800

$grün-900

$blaugrün#20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$zyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$grau-500#adb5bd

$grau-100

$grau-200

$grau-300

$grau-400

$grau-500

$grau-600

$grau-700

$grau-800

$grau-900

$schwarz#000

$weiß#F f f

Anmerkungen zu Sass

Sass kann keine Variablen programmgesteuert generieren, also haben wir selbst manuell Variablen für jeden Farbton und jede Schattierung erstellt. Wir spezifizieren den Mittelpunktwert (z. B. $blue-500) und verwenden benutzerdefinierte Farbfunktionen, um unsere Farben über die Farbfunktion von Sass zu tönen (aufhellen) oder schattieren (abdunkeln) mix().

Die Verwendung mix()ist nicht dasselbe wie lighten()und darken()— Ersteres mischt die angegebene Farbe mit Weiß oder Schwarz, während Letzteres nur den Helligkeitswert jeder Farbe anpasst. Das Ergebnis ist eine viel vollständigere Farbpalette, wie in dieser CodePen-Demo gezeigt .

Unsere Funktionen tint-color()und werden zusammen mit unserer Variablen verwendet, die einen abgestuften Prozentwert für jede von uns erzeugte Mischfarbe angibt. Den vollständigen Quellcode finden Sie in den Dateien und .shade-color()mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

Sass-Karten in Farbe

Die Sass-Quelldateien von Bootstrap enthalten drei Karten, mit denen Sie schnell und einfach eine Liste von Farben und ihren Hex-Werten durchlaufen können.

$colorslistet alle unsere verfügbaren 500Grundfarben ( ) auf
$theme-colorslistet alle semantisch benannten Themenfarben auf (siehe unten)
$grayslistet alle Tönungen und Graustufen auf

Darin scss/_variables.scssfinden Sie die Farbvariablen und die Sass-Karte von Bootstrap. Hier ist ein Beispiel für die $colorsSass-Karte:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Fügen Sie Werte innerhalb der Karte hinzu, entfernen oder ändern Sie sie, um zu aktualisieren, wie sie in vielen anderen Komponenten verwendet werden. Leider verwenden derzeit nicht alle Komponenten diese Sass-Karte. Zukünftige Updates werden danach streben, dies zu verbessern. Planen Sie bis dahin, die ${color}Variablen und diese Sass-Karte zu verwenden.

Beispiel

So können Sie diese in Ihrem Sass verwenden:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Farb- und Hintergrund - Hilfsklassen sind auch zum Festlegen colorund background-colorVerwenden der 500Farbwerte verfügbar.