Thema Bootstrap

Pas Bootstrap 4 aan met onze nieuwe ingebouwde Sass-variabelen voor algemene stijlvoorkeuren voor eenvoudige thema- en componentwijzigingen.

Invoering

In Bootstrap 3 werd het thema grotendeels bepaald door variabele overschrijvingen in LESS, aangepaste CSS en een apart thema-stylesheet dat we in onze distbestanden hebben opgenomen. Met enige moeite zou men het uiterlijk van Bootstrap 3 volledig kunnen herontwerpen zonder de kernbestanden aan te raken. Bootstrap 4 biedt een bekende, maar iets andere benadering.

Thema's worden nu bereikt door Sass-variabelen, Sass-kaarten en aangepaste CSS. Er is geen speciaal thema-stylesheet meer; in plaats daarvan kunt u het ingebouwde thema inschakelen om verlopen, schaduwen en meer toe te voegen.

Sass

Gebruik onze Sass-bronbestanden om te profiteren van variabelen, kaarten, mixins en meer bij het compileren van Sass met behulp van uw eigen activapijplijn.

Bestandsstructuur

Vermijd waar mogelijk het wijzigen van de kernbestanden van Bootstrap. Voor Sass betekent dat het maken van uw eigen stylesheet die Bootstrap importeert, zodat u deze kunt wijzigen en uitbreiden. Ervan uitgaande dat u een pakketbeheerder zoals npm gebruikt, heeft u een bestandsstructuur die er als volgt uitziet:

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

Als je onze bronbestanden hebt gedownload en geen pakketbeheerder gebruikt, moet je handmatig iets instellen dat lijkt op die structuur, waarbij je de bronbestanden van Bootstrap gescheiden houdt van die van jezelf.

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

Importeren

In uw custom.scss, importeert u de Sass-bronbestanden van Bootstrap. Je hebt twee opties: voeg alle Bootstrap toe, of kies de onderdelen die je nodig hebt. We moedigen het laatste aan, maar houd er rekening mee dat er enkele vereisten en afhankelijkheden zijn tussen onze componenten. U moet ook wat JavaScript toevoegen voor onze plug-ins.

// 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";

Met die opstelling kunt u beginnen met het wijzigen van alle Sass-variabelen en -kaarten in uw custom.scss. U kunt indien nodig ook beginnen met het toevoegen van delen van Bootstrap onder de // Optionalsectie. We raden aan om de volledige importstack uit ons bootstrap.scssbestand als startpunt te gebruiken.

Standaardwaarden van variabelen

Elke Sass-variabele in Bootstrap bevat de !defaultvlag waarmee u de standaardwaarde van de variabele in uw eigen Sass kunt overschrijven zonder de broncode van Bootstrap te wijzigen. Kopieer en plak variabelen indien nodig, wijzig hun waarden en verwijder de !defaultvlag. Als een variabele al is toegewezen, wordt deze niet opnieuw toegewezen door de standaardwaarden in Bootstrap.

U vindt de volledige lijst met Bootstrap-variabelen in scss/_variables.scss. Sommige variabelen zijn ingesteld op null, deze variabelen voeren de eigenschap niet uit, tenzij ze worden overschreven in uw configuratie.

Overschrijvingen van variabelen moeten komen nadat onze functies, variabelen en mixins zijn geïmporteerd, maar vóór de rest van de import.

Hier is een voorbeeld dat de background-coloren colorvoor de verandert <body>bij het importeren en compileren van Bootstrap via npm:

@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

Herhaal indien nodig voor elke variabele in Bootstrap, inclusief de globale opties hieronder.

Kaarten en lussen

Bootstrap 4 bevat een handvol Sass-kaarten, sleutelwaardeparen die het gemakkelijker maken om families van gerelateerde CSS te genereren. We gebruiken Sass-kaarten voor onze kleuren, rasteronderbrekingspunten en meer. Net als Sass-variabelen, bevatten alle Sass-kaarten de !defaultvlag en kunnen ze worden overschreven en uitgebreid.

Sommige van onze Sass-kaarten zijn standaard samengevoegd tot lege. Dit wordt gedaan om een ​​bepaalde Sass-kaart gemakkelijk uit te breiden, maar gaat ten koste van het iets moeilijker maken van het verwijderen van items van een kaart.

Wijzig kaart

Om een ​​bestaande kleur in onze $theme-colorskaart te wijzigen, voegt u het volgende toe aan uw aangepaste Sass-bestand:

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

Toevoegen aan kaart

Om een ​​nieuwe kleur toe te voegen aan $theme-colors, voegt u de nieuwe sleutel en waarde toe:

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

Van kaart verwijderen

Gebruik om kleuren van $theme-colors, of een andere kaart te verwijderen map-remove. Houd er rekening mee dat u deze tussen onze vereisten en opties moet invoegen:

// 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";
...

Vereiste sleutels

Bootstrap veronderstelt de aanwezigheid van enkele specifieke sleutels binnen Sass-kaarten zoals we deze zelf gebruikten en uitbreiden. Als u de meegeleverde kaarten aanpast, kunt u fouten tegenkomen wanneer de sleutel van een specifieke Sass-kaart wordt gebruikt.

We gebruiken bijvoorbeeld de primary, success, en dangertoetsen van $theme-colorsvoor links, knoppen en formulierstatussen. Het vervangen van de waarden van deze sleutels zou geen problemen moeten opleveren, maar het verwijderen ervan kan Sass-compilatieproblemen veroorzaken. In deze gevallen moet u de Sass-code wijzigen die gebruikmaakt van die waarden.

Functies

Bootstrap maakt gebruik van verschillende Sass-functies, maar slechts een subset is van toepassing op algemene thema's. We hebben drie functies toegevoegd om waarden uit de kleurenkaarten te halen:

@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);
}

Hiermee kunt u één kleur uit een Sass-kaart kiezen, net zoals u een kleurvariabele uit v3 zou gebruiken.

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

We hebben ook een andere functie om een ​​bepaald kleurniveau van de $theme-colorskaart te krijgen. Negatieve niveauwaarden zullen de kleur lichter maken, terwijl hogere niveaus donkerder zullen worden.

@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 de praktijk zou je de functie aanroepen en twee parameters doorgeven: de naam van de kleur van $theme-colors(bijvoorbeeld primair of gevaar) en een numeriek niveau.

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

Extra functies kunnen in de toekomst worden toegevoegd of uw eigen aangepaste Sass om niveaufuncties te maken voor extra Sass-kaarten, of zelfs een generieke als u uitgebreider wilt zijn.

Kleurcontrast

Een extra functie die we in Bootstrap opnemen is de kleurcontrastfunctie, color-yiq. Het gebruikt de YIQ-kleurruimte om automatisch een lichte ( #fff) of donkere ( #111) contrastkleur terug te geven op basis van de opgegeven basiskleur. Deze functie is vooral handig voor mixins of loops waarin u meerdere klassen genereert.

Om bijvoorbeeld kleurstalen van onze $theme-colorskaart te genereren:

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

Het kan ook worden gebruikt voor eenmalige contrastbehoeften:

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

U kunt ook een basiskleur specificeren met onze kleurenkaartfuncties:

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

Ontsnap aan SVG

We gebruiken de escape-svgfunctie om te ontsnappen aan de tekens <, >en #voor SVG-achtergrondafbeeldingen. Van deze tekens moet een escape-teken worden gemaakt om de achtergrondafbeeldingen in IE correct weer te geven. Bij gebruik van de escape-svgfunctie moeten gegevens-URI's worden aangehaald.

Functies optellen en aftrekken

We gebruiken de adden subtractfuncties om de CSS- calcfunctie in te pakken. Het primaire doel van deze functies is om fouten te voorkomen wanneer een "eenheidloze" 0waarde wordt doorgegeven aan een calcuitdrukking. Uitdrukkingen zoals calc(10px - 0)geven een foutmelding in alle browsers, ondanks dat ze wiskundig correct zijn.

Voorbeeld waarbij de calc geldig is:

$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);
}

Voorbeeld waarbij de calc ongeldig is:

$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-opties

Pas Bootstrap 4 aan met ons ingebouwde bestand met aangepaste variabelen en schakel eenvoudig algemene CSS-voorkeuren in met nieuwe $enable-*Sass-variabelen. Overschrijf de waarde van een variabele en hercompileer met npm run testindien nodig.

U kunt deze variabelen vinden en aanpassen voor belangrijke globale opties in het bestand van Bootstrap scss/_variables.scss.

Kleur

Veel van de verschillende componenten en hulpprogramma's van Bootstrap zijn gebouwd via een reeks kleuren die zijn gedefinieerd in een Sass-kaart. Deze kaart kan worden doorlopen in Sass om snel een reeks regelsets te genereren.

Alle kleuren

Alle kleuren die beschikbaar zijn in Bootstrap 4, zijn beschikbaar als Sass-variabelen en een Sass-kaart in scss/_variables.scssbestand. Dit zal worden uitgebreid in volgende kleinere releases om extra tinten toe te voegen, net zoals het grijswaardenpalet dat we al opnemen.

Hier leest u hoe u deze in uw Sass kunt gebruiken:

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

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

Er zijn ook kleurhulpprogrammaklassen beschikbaar voor instelling coloren background-color.

Thema kleuren

We gebruiken een subset van alle kleuren om een ​​kleiner kleurenpalet te creëren voor het genereren van kleurenschema's, ook beschikbaar als Sass-variabelen en een Sass-kaart in het scss/_variables.scssbestand van Bootstrap.

Grijzen

Een uitgebreide set grijsvariabelen en een Sass-kaart scss/_variables.scssvoor consistente grijstinten in uw project. Merk op dat dit "koele grijstinten" zijn, die neigen naar een subtiele blauwe tint in plaats van neutrale grijstinten.

Binnen scss/_variables.scssvindt u de kleurvariabelen van Bootstrap en de Sass-kaart. Hier is een voorbeeld van de $colorsSass-kaart:

$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;

Voeg waarden toe, verwijder of wijzig waarden binnen de kaart om bij te werken hoe ze in veel andere componenten worden gebruikt. Helaas maakt op dit moment niet elk onderdeel gebruik van deze Sass-kaart. Toekomstige updates zullen ernaar streven dit te verbeteren. Maak tot die tijd gebruik van de ${color}variabelen en deze Sass-kaart.

Componenten

Veel van de componenten en hulpprogramma's van Bootstrap zijn gebouwd met @eachlussen die zich herhalen over een Sass-kaart. Dit is vooral handig voor het genereren van varianten van een component door onze $theme-colorsen het maken van responsieve varianten voor elk breekpunt. Terwijl u deze Sass-kaarten aanpast en opnieuw compileert, ziet u uw wijzigingen automatisch weerspiegeld in deze lussen.

Modifiers

Veel van Bootstrap's componenten zijn gebouwd met een base-modifier class-benadering. Dit betekent dat het grootste deel van de styling is opgenomen in een basisklasse (bijv. .btn), terwijl stijlvariaties beperkt zijn tot modificatieklassen (bijv. .btn-danger). Deze modifier-klassen zijn opgebouwd uit de $theme-colorskaart om het aantal en de naam van onze modifier-klassen aan te passen.

Hier zijn twee voorbeelden van hoe we over de $theme-colorskaart lopen om modifiers voor de .alertcomponent en al onze .bg-*achtergrondhulpprogramma's te genereren.

// 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);
}

Snel reagerend

Deze Sass-loops zijn ook niet beperkt tot kleurenkaarten. U kunt ook responsieve variaties van uw componenten of hulpprogramma's genereren. Neem bijvoorbeeld onze responsieve hulpprogramma's voor tekstuitlijning, waarbij we een @eachlus voor de $grid-breakpointsSass-kaart combineren met een mediaquery include.

@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; }
  }
}

Als u uw , moet wijzigen $grid-breakpoints, zijn uw wijzigingen van toepassing op alle lussen die over die kaart itereren.

CSS-variabelen

Bootstrap 4 bevat ongeveer twee dozijn aangepaste CSS-eigenschappen (variabelen) in de gecompileerde CSS. Deze bieden gemakkelijke toegang tot veelgebruikte waarden zoals onze themakleuren, breekpunten en primaire lettertypestapels wanneer u werkt in de Inspector van uw browser, een code-sandbox of algemene prototyping.

Beschikbare variabelen

Dit zijn de variabelen die we opnemen (merk op dat het :rootvereist is). Ze bevinden zich in ons _root.scssdossier.

: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;
}

Voorbeelden

CSS-variabelen bieden vergelijkbare flexibiliteit als de variabelen van Sass, maar zonder de noodzaak van compilatie voordat ze aan de browser worden aangeboden. Hier stellen we bijvoorbeeld het lettertype en de linkstijlen van onze pagina opnieuw in met CSS-variabelen.

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

Breekpuntvariabelen

Hoewel we oorspronkelijk breekpunten in onze CSS-variabelen hebben opgenomen (bijv. --breakpoint-md), worden deze niet ondersteund in mediaquery's , maar ze kunnen nog steeds worden gebruikt binnen regelsets in mediaquery's. Deze breekpuntvariabelen blijven in de gecompileerde CSS voor achterwaartse compatibiliteit, aangezien ze door JavaScript kunnen worden gebruikt. Lees meer in de specificatie .

Hier is een voorbeeld van wat niet wordt ondersteund:

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

En hier is een voorbeeld van wat wordt ondersteund:

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