Bootstrap - CSS-Variablen: Ein Anfängerleitfaden

Hallo da draußen, zukünftige Webentwickler! Heute tauchen wir in die wundervolle Welt der CSS-Variablen in Bootstrap ein. Machen Sie sich keine Sorgen, wenn Sie neu hier sind; ich werde Sie durch jeden Schritt führen, als säßen wir gemeinsam in einem gemütlichen Klassenzimmer. Lassen Sie uns diese aufregende Reise beginnen!

Bootstrap - CSS Variables

Was sind CSS-Variablen?

Bevor wir uns den Bootstrap-spezifischen Variablen zuwenden, lassen Sie uns verstehen, was CSS-Variablen sind. CSS-Variablen, auch bekannt als benutzerdefinierte CSS-Eigenschaften, ermöglichen es Ihnen, bestimmte Werte zu speichern, die im gesamten Stilblatt wiederverwendet werden können. Stellen Sie sich sie als kleine Behälter vor, die Ihre Lieblingsfarben, Größen oder andere CSS-Werte halten.

Stammvariablen

In Bootstrap sind Stammvariablen die Grundlage des gesamten Variablenystems. Sie werden im :root-Selektor definiert, der die höchste Ebene Ihres Dokumentenbaums darstellt.

:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
}

Diese Variablen definieren die Kernfarben, die im gesamten Bootstrap verwendet werden. Zum Beispiel ist --bs-blue die primäre Blaufarbe von Bootstrap. Sie können diese Variablen in Ihrem eigenen CSS如此 verwenden:

.my-element {
color: var(--bs-blue);
}

Standardvariablen

Bootstrap bietet auch ein Satz von Standardvariablen, die zum Stylen verschiedener Komponenten verwendet werden. Diese Variablen beziehen sich oft auf die Stammvariablen, die wir gerade gesehen haben.

:root {
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-gray-600);
--bs-success: var(--bs-green);
--bs-info: var(--bs-cyan);
--bs-warning: var(--bs-yellow);
--bs-danger: var(--bs-red);
--bs-light: var(--bs-gray-100);
--bs-dark: var(--bs-gray-900);
}

Hier ist --bs-primary auf den Wert von --bs-blue gesetzt. Dies ermöglicht eine einfache Anpassung und Konsistenz in Ihrem Projekt.

Dunkelmodus-Variablen

Bootstrap 5 führte Unterstützung für Dunkelmodus mit CSS-Variablen ein. Diese Variablen ändern ihre Werte, wenn der Dunkelmodus aktiviert wird.

[data-bs-theme="dark"] {
--bs-body-color: #adb5bd;
--bs-body-bg: #212529;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255,255,255;
}

Wenn das Attribut data-bs-theme="dark" auf ein Element angewendet wird (normalerweise das <html> oder <body>), überschreiben diese Variablen ihre.Counterparts im Hellmodus und verwandeln Ihre Website sofort in den Dunkelmodus. Cool, oder?

Komponentenvariablen

Bootstrap-Komponenten verwenden ebenfalls CSS-Variablen für das Styling. Dies macht es einfach, individuelle Komponenten anzupassen, ohne andere zu beeinflussen.

.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
}

Diese Variablen steuern jedes Aspekt des Erscheinungsbilds einer primären Schaltfläche. Möchten Sie die Hover-Farbe ändern? Ändern Sie einfach --bs-btn-hover-bg!

Präfix

Bootstrap verwendet das Präfix bs- für alle seine Variablen, um Konflikte mit Ihren benutzerdefinierten Variablen oder denen anderer Bibliotheken zu vermeiden. Wenn Sie Ihre eigenen Variablen erstellen, ist es eine gute Praxis, Ihr eigenes Präfix zu verwenden.

:root {
--my-awesome-color: #ff69b4;
}

Beispiele

Lassen Sie uns unser Wissen mit ein paar Beispielen in die Praxis umsetzen:

Ändern der primären Farbe:

:root {
--bs-primary: #ff69b4; /* Rosa ist die neue Blau! */
}

Erstellen einer benutzerdefinierten Schaltfläche:

.btn-awesome {
--bs-btn-color: #fff;
--bs-btn-bg: var(--my-awesome-color);
--bs-btn-border-color: var(--my-awesome-color);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #ff1493; /* Tiefes Rosa bei Hover */
--bs-btn-hover-border-color: #ff1493;
}

Anpassen des Body-Hintergrunds im Dunkelmodus:

[data-bs-theme="dark"] {
--bs-body-bg: #000; /* Pitch black background */
}

Fokusvariablen

Bootstrap bietet auch Variablen für Fokuszustände, um die Barrierefreiheit auf Ihrer Website zu gewährleisten:

:root {
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
}

Diese Variablen steuern das Erscheinungsbild von Fokusringen um interaktive Elemente.

Rasterbruchpunkte

Last but not least, Bootstrap's responsives Rastersystem wird ebenfalls durch CSS-Variablen kontrolliert:

:root {
--bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px;
--bs-breakpoint-md: 768px;
--bs-breakpoint-lg: 992px;
--bs-breakpoint-xl: 1200px;
--bs-breakpoint-xxl: 1400px;
}

Diese Variablen definieren die Breiten, bei denen sich Ihr Layout ändert, um verschiedene Bildschirmgrößen zu berücksichtigen.

Zusammenfassung

Hier ist eine schnelle Referenztabelle der Haupttypen von CSS-Variablen, die wir behandelt haben:

Variablenart	Zweck	Beispiel
Stammvariablen	Definiert Kernwerte	`--bs-blue: #0d6efd;`
Standardvariablen	Setzt Themenfarben	`--bs-primary: var(--bs-blue);`
Dunkelmodus-Variablen	Steuert dunklen Modus	`--bs-body-bg: #212529;`
Komponentenvariablen	Stylt spezifische Komponenten	`--bs-btn-bg: var(--bs-primary);`
Fokusvariablen	Steuert Fokuszustände	`--bs-focus-ring-width: 0.25rem;`
Rasterbruchpunkte	Definiert responsive Bruchpunkte	`--bs-breakpoint-md: 768px;`

Und das war's! Sie haben gerade Ihre ersten Schritte in die Welt der Bootstrap CSS-Variablen unternommen. Denken Sie daran, dass der Schlüssel zum Beherrschen dieser Technologie die Übung ist. Versuchen Sie, diese Variablen in Ihren Projekten anzupassen und sehen Sie, wie sie Ihr Design beeinflussen. Viel Spaß beim Coden und vergessen Sie nicht, Spaß dabei zu haben!

Credits: Image by storyset