Source

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

Nutzen Sie unsere Sass-Quelldateien, um Variablen, Maps, Mixins und mehr zu nutzen. In unserem Build haben wir die Sass-Rundungspräzision auf 6 erhöht (standardmäßig ist sie 5), um Probleme mit der Browser-Rundung zu vermeiden.

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

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

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

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

// Optional
@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 4 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 innerhalb derselben Sass-Datei können vor oder nach den Standardvariablen stehen. Wenn Sie jedoch Sass-Dateien überschreiben, müssen Ihre Überschreibungen kommen, bevor Sie die Sass-Dateien von Bootstrap importieren.

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

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

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

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.

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 .

Variable	Werte	Beschreibung
`$spacer`	`1rem`(Standard) oder ein beliebiger Wert > 0	Gibt den Standardwert für den Abstandshalter an, um unsere Abstandshalter-Dienstprogramme programmgesteuert zu generieren .
`$enable-rounded`	`true`(Standard) oder`false`	Aktiviert vordefinierte `border-radius`Stile für verschiedene Komponenten.
`$enable-shadows`	`true`oder `false`(Standard)	Aktiviert vordefinierte `box-shadow`Stile für verschiedene Komponenten.
`$enable-gradients`	`true`oder `false`(Standard)	Ermöglicht vordefinierte Farbverläufe über `background-image`Stile auf verschiedenen Komponenten.
`$enable-transitions`	`true`(Standard) oder`false`	Aktiviert vordefinierte `transition`s auf verschiedenen Komponenten.
`$enable-prefers-reduced-motion-media-query`	`true`(Standard) oder`false`	Aktiviert die `prefers-reduced-motion`Medienabfrage , die bestimmte Animationen/Übergänge basierend auf den Browser-/Betriebssystemeinstellungen des Benutzers unterdrückt.
`$enable-hover-media-query`	`true`oder `false`(Standard)	Veraltet
`$enable-grid-classes`	`true`(Standard) oder`false`	Ermöglicht die Generierung von CSS-Klassen für das Grid-System (zB , `.container`, `.row`, `.col-md-1`etc.).
`$enable-caret`	`true`(Standard) oder`false`	Aktiviert das Pseudoelement Caret on `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(Standard) oder`false`	Hinzufügen eines „Hand“-Cursors zu nicht deaktivierten Schaltflächenelementen.
`$enable-print-styles`	`true`(Standard) oder`false`	Aktiviert Stile zum Optimieren des Drucks.
`$enable-responsive-font-sizes`	`true`oder `false`(Standard)	Aktiviert ansprechende Schriftgrößen .
`$enable-validation-icons`	`true`(Standard) oder`false`	Aktiviert `background-image`Symbole in Texteingaben und einigen benutzerdefinierten Formularen für Validierungsstatus.
`$enable-deprecation-messages`	`true`oder `false`(Standard)	Legen Sie fest, `true`um Warnungen anzuzeigen, wenn Sie veraltete Mixins und Funktionen verwenden, die in entfernt werden sollen `v5`.

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.

Blau

Indigo

Violett

Rosa

Rot

Orange

Gelb

Grün

Blaugrün

Cyan

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.

In Zukunft werden wir uns bemühen, Sass-Karten und -Variablen für Schattierungen jeder Farbe bereitzustellen, wie wir es mit den Graustufenfarben unten getan haben.

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

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.

100

200

300

400

500

600

700

800

900

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", 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);
  }
}