Bootstrap thematisieren

Passen Sie Bootstrap 4 mit unseren neuen integrierten Sass-Variablen für globale Stilpräferenzen für einfache Design- und Komponentenänderungen an.

Einführung

In Bootstrap 3 wurde das Thematisieren weitgehend von Variablenüberschreibungen in LESS, benutzerdefiniertem CSS und einem separaten Design-Stylesheet gesteuert, das wir in unsere distDateien aufgenommen haben. Mit etwas Aufwand könnte man den Look von Bootstrap 3 komplett umgestalten, ohne die Kerndateien anzutasten. Bootstrap 4 bietet einen vertrauten, aber etwas anderen Ansatz.

Jetzt wird das Thema durch Sass-Variablen, Sass-Maps und benutzerdefiniertes CSS erreicht. Es gibt kein spezielles Design-Stylesheet mehr; Stattdessen können Sie das integrierte Design aktivieren, um Farbverläufe, Schatten und mehr hinzuzufügen.

Sass

Verwenden Sie unsere Sass-Quelldateien, um Variablen, Maps, Mixins und mehr zu nutzen, wenn Sie Sass mit Ihrer eigenen Asset-Pipeline kompilieren.

Dateistruktur

Vermeiden Sie nach Möglichkeit, die Kerndateien von Bootstrap zu ändern. Für Sass bedeutet das, ein eigenes Stylesheet zu erstellen, das Bootstrap importiert, damit Sie es ändern und erweitern können. Angenommen, Sie verwenden einen Paketmanager wie npm, haben Sie eine Dateistruktur, die wie folgt aussieht:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Wenn Sie unsere Quelldateien heruntergeladen haben und keinen Paketmanager verwenden, sollten Sie etwas Ähnliches wie diese Struktur manuell einrichten und die Quelldateien von Bootstrap von Ihren eigenen getrennt halten.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Importieren

In Ihre custom.scssimportieren Sie die Sass-Quelldateien von Bootstrap. Sie haben zwei Möglichkeiten: Schließen Sie Bootstrap vollständig ein oder wählen Sie die Teile aus, die Sie benötigen. Wir empfehlen Letzteres, beachten Sie jedoch, dass es einige Anforderungen und Abhängigkeiten zwischen unseren Komponenten gibt. Sie müssen auch etwas JavaScript für unsere Plugins einbinden.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Mit diesem Setup können Sie beginnen, alle Sass-Variablen und -Zuordnungen in Ihrer custom.scss. Sie können auch nach Bedarf Teile von Bootstrap unter dem // OptionalAbschnitt hinzufügen. Wir empfehlen, den vollständigen Importstapel aus unserer bootstrap.scssDatei als Ausgangspunkt zu verwenden.

Variablenvorgaben

Jede Sass-Variable in Bootstrap enthält das !defaultFlag, mit dem Sie den Standardwert der Variablen in Ihrem eigenen Sass überschreiben können, ohne den Quellcode von Bootstrap zu ändern. Kopieren Sie Variablen nach Bedarf und fügen Sie sie ein, ändern Sie ihre Werte und entfernen Sie das !defaultFlag. Wenn eine Variable bereits zugewiesen wurde, wird sie nicht durch die Standardwerte in Bootstrap neu zugewiesen.

Die vollständige Liste der Bootstrap-Variablen finden Sie in scss/_variables.scss. Einige Variablen sind auf gesetzt null, diese Variablen geben die Eigenschaft nicht aus, es sei denn, sie werden in Ihrer Konfiguration überschrieben.

Variablenüberschreibungen müssen kommen, nachdem unsere Funktionen, Variablen und Mixins importiert wurden, aber vor den restlichen Importen.

Hier ist ein Beispiel, das das background-colorund colorfür das <body>beim Importieren und Kompilieren von Bootstrap über npm ändert:

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Wiederholen Sie dies nach Bedarf für jede Variable in Bootstrap, einschließlich der globalen Optionen unten.

Karten und Schleifen

Bootstrap 4 enthält eine Handvoll Sass-Maps, Schlüssel-Wert-Paare, die es einfacher machen, Familien verwandter CSS zu generieren. Wir verwenden Sass-Maps für unsere Farben, Grid Breakpoints und mehr. Genau wie Sass-Variablen enthalten alle Sass-Maps das !defaultFlag und können überschrieben und erweitert werden.

Einige unserer Sass-Karten werden standardmäßig zu leeren Karten zusammengeführt. Dies geschieht, um eine einfache Erweiterung einer bestimmten Sass-Karte zu ermöglichen, hat jedoch den Preis, dass das Entfernen von Gegenständen von einer Karte etwas schwieriger wird.

Karte ändern

Um eine vorhandene Farbe in unserer $theme-colorsKarte zu ändern, fügen Sie Folgendes zu Ihrer benutzerdefinierten Sass-Datei hinzu:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Zur Karte hinzufügen

Um eine neue Farbe zu $theme-colorshinzuzufügen, fügen Sie den neuen Schlüssel und Wert hinzu:

$theme-colors: (
  "custom-color": #900
);

Von der Karte entfernen

Um Farben aus $theme-colorsoder einer anderen Karte zu entfernen, verwenden Sie map-remove. Beachten Sie, dass Sie es zwischen unseren Anforderungen und Optionen einfügen müssen:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Erforderliche Schlüssel

Bootstrap geht davon aus, dass einige spezifische Schlüssel in Sass-Maps vorhanden sind, da wir diese selbst verwendet und erweitert haben. Beim Anpassen der enthaltenen Karten können Fehler auftreten, wenn der Schlüssel einer bestimmten Sass-Karte verwendet wird.

Beispielsweise verwenden wir die Schlüssel primary, success, und von für Links, Schaltflächen und Formularzustände. Das Ersetzen der Werte dieser Schlüssel sollte keine Probleme bereiten, aber das Entfernen kann zu Sass-Kompilierungsproblemen führen. In diesen Fällen müssen Sie den Sass-Code ändern, der diese Werte verwendet.danger$theme-colors

Funktionen

Bootstrap verwendet mehrere Sass-Funktionen, aber nur eine Teilmenge ist auf die allgemeine Thematisierung anwendbar. Wir haben drei Funktionen zum Abrufen von Werten aus den Farbkarten hinzugefügt:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Mit diesen können Sie eine Farbe aus einer Sass-Karte auswählen, ähnlich wie Sie eine Farbvariable aus v3 verwenden würden.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Wir haben auch eine andere Funktion, um eine bestimmte Farbstufe von der $theme-colorsKarte zu erhalten. Negative Werte werden die Farbe aufhellen, während höhere Werte dunkler werden.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

In der Praxis würden Sie die Funktion aufrufen und zwei Parameter übergeben: den Namen der Farbe von $theme-colors(z. B. Primär oder Gefahr) und eine numerische Ebene.

.custom-element {
  color: theme-color-level(primary, -10);
}

In Zukunft könnten zusätzliche Funktionen oder Ihr eigenes benutzerdefiniertes Sass hinzugefügt werden, um Level-Funktionen für zusätzliche Sass-Karten zu erstellen, oder sogar eine generische, wenn Sie ausführlicher sein möchten.

Farbkontrast

Eine zusätzliche Funktion, die wir in Bootstrap integrieren, ist die Farbkontrastfunktion, color-yiq. Es verwendet den YIQ-Farbraum , um basierend auf der angegebenen Grundfarbe automatisch eine helle ( #fff) oder dunkle ( #111) Kontrastfarbe zurückzugeben. Diese Funktion ist besonders nützlich für Mixins oder Loops, bei denen Sie mehrere Klassen generieren.

Um beispielsweise Farbmuster aus unserer $theme-colorsKarte zu generieren:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Es kann auch für einmaligen Kontrastbedarf verwendet werden:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Sie können auch eine Grundfarbe mit unseren Farbkartenfunktionen angeben:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Entkomme SVG

Wir verwenden die escape-svgFunktion, um die Zeichen <, >und #für SVG-Hintergrundbilder zu maskieren. Diese Zeichen müssen maskiert werden, um die Hintergrundbilder in IE richtig darzustellen. Bei Verwendung der escape-svgFunktion müssen Daten-URIs in Anführungszeichen gesetzt werden.

Addieren und Subtrahieren von Funktionen

Wir verwenden die Funktionen addund subtract, um die CSS- calcFunktion zu umschließen. Der Hauptzweck dieser Funktionen besteht darin, Fehler zu vermeiden, wenn ein 0Wert ohne Einheit an einen calcAusdruck übergeben wird. Ausdrücke wie calc(10px - 0)geben in allen Browsern einen Fehler zurück, obwohl sie mathematisch korrekt sind.

Beispiel, wo die Berechnung gültig ist:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Beispiel, wo die Berechnung ungültig ist:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Sass-Optionen

Passen Sie Bootstrap 4 mit unserer integrierten benutzerdefinierten Variablendatei an und schalten Sie mit neuen $enable-*Sass-Variablen ganz einfach zwischen globalen CSS-Einstellungen um. Überschreiben Sie den Wert einer Variablen und kompilieren Sie mit npm run testnach Bedarf.

scss/_variables.scssSie können diese Variablen für wichtige globale Optionen in der Bootstrap- Datei finden und anpassen .

Farbe

Viele der verschiedenen Komponenten und Dienstprogramme von Bootstrap werden durch eine Reihe von Farben erstellt, die in einer Sass-Karte definiert sind. Diese Karte kann in Sass durchlaufen werden, um schnell eine Reihe von Regelsätzen zu generieren.

Alle Farben

Alle in Bootstrap 4 verfügbaren Farben sind als Sass-Variablen und als Sass-Map in einer scss/_variables.scssDatei verfügbar. Dies wird in späteren Nebenversionen erweitert, um zusätzliche Schattierungen hinzuzufügen, ähnlich wie die Graustufenpalette , die wir bereits enthalten.

So können Sie diese in Ihrem Sass verwenden:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Farbdienstleistungsklassen sind auch für die Einstellung colorund verfügbar background-color.

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.

Graue

Ein umfangreicher Satz grauer Variablen und eine Sass-Karte sorgen scss/_variables.scssfür konsistente Grauschattierungen in Ihrem Projekt. Beachten Sie, dass es sich um „kühle Grautöne“ handelt, die eher zu einem dezenten Blauton neigen, als zu neutralen Grautönen.

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
) !default;

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.

Komponenten

Viele der Komponenten und Dienstprogramme von Bootstrap werden mit @eachSchleifen erstellt, die über eine Sass-Karte iterieren. Dies ist besonders hilfreich, um Varianten einer Komponente von uns zu generieren $theme-colorsund responsive Varianten für jeden Haltepunkt zu erstellen. Wenn Sie diese Sass-Karten anpassen und neu kompilieren, werden Ihre Änderungen automatisch in diesen Schleifen widergespiegelt.

Modifikatoren

Viele der Bootstrap-Komponenten werden mit einem Basis-Modifikator-Klassenansatz erstellt. Das bedeutet, dass der Großteil des Stils in einer Basisklasse (z. B. .btn) enthalten ist, während Stilvariationen auf Modifikatorklassen (z . B. ) beschränkt sind .btn-danger. Diese Modifikatorklassen werden aus der $theme-colorsKarte erstellt, um die Anzahl und den Namen unserer Modifikatorklassen anzupassen.

Hier sind zwei Beispiele dafür, wie wir die $theme-colorsKarte durchlaufen, um Modifikatoren für die .alertKomponente und alle unsere .bg-*Hintergrunddienstprogramme zu generieren.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Reaktionsschnell

Diese Sass-Loops sind auch nicht auf Farbkarten beschränkt. Sie können auch responsive Variationen Ihrer Komponenten oder Dienstprogramme generieren. Nehmen Sie zum Beispiel unsere Hilfsprogramme für die reaktionsschnelle Textausrichtung, bei denen wir eine @eachSchleife für die $grid-breakpointsSass-Karte mit einer Medienabfrage mischen.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Sollten Sie $grid-breakpointsIhre ändern müssen, gelten Ihre Änderungen für alle Schleifen, die über diese Karte iterieren.

CSS-Variablen

Bootstrap 4 enthält rund zwei Dutzend benutzerdefinierte CSS-Eigenschaften (Variablen) in seinem kompilierten CSS. Diese bieten einfachen Zugriff auf häufig verwendete Werte wie unsere Designfarben, Haltepunkte und primären Schriftstapel, wenn Sie im Inspector Ihres Browsers, einer Code-Sandbox oder beim allgemeinen Prototyping arbeiten.

Verfügbare Variablen

Hier sind die Variablen, die wir einschließen (beachten Sie, dass die :rooterforderlich ist). Sie befinden sich in unserer _root.scssDatei.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Beispiele

CSS-Variablen bieten eine ähnliche Flexibilität wie die Variablen von Sass, müssen jedoch nicht kompiliert werden, bevor sie dem Browser bereitgestellt werden. Hier setzen wir beispielsweise die Schriftart und die Linkstile unserer Seite mit CSS-Variablen zurück.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Breakpoint-Variablen

Obwohl wir ursprünglich Haltepunkte in unsere CSS-Variablen aufgenommen haben (z. B. --breakpoint-md), werden diese in Medienabfragen nicht unterstützt , können aber dennoch innerhalb von Regelsätzen in Medienabfragen verwendet werden. Diese Breakpoint-Variablen verbleiben aus Gründen der Abwärtskompatibilität im kompilierten CSS, da sie von JavaScript verwendet werden können. Erfahren Sie mehr in der Spezifikation .

Hier ist ein Beispiel dafür, was nicht unterstützt wird:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Und hier ist ein Beispiel dafür, was unterstützt wird:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}