Source

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.

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

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

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 4 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.

Variabele-overschrijvingen binnen hetzelfde Sass-bestand kunnen voor of na de standaardvariabelen komen. Bij het overschrijven van Sass-bestanden moeten uw overschrijvingen echter plaatsvinden voordat u de Sass-bestanden van Bootstrap importeert.

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

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

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

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`
}

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.

Variabele	Waarden	Beschrijving
`$spacer`	`1rem`(standaard), of een waarde > 0	Specificeert de standaard spacer-waarde om onze spacer-hulpprogramma's programmatisch te genereren .
`$enable-rounded`	`true`(standaard) of`false`	Maakt voorgedefinieerde `border-radius`stijlen op verschillende componenten mogelijk.
`$enable-shadows`	`true`of `false`(standaard)	Maakt voorgedefinieerde `box-shadow`stijlen op verschillende componenten mogelijk.
`$enable-gradients`	`true`of `false`(standaard)	Maakt voorgedefinieerde verlopen via `background-image`stijlen op verschillende componenten mogelijk.
`$enable-transitions`	`true`(standaard) of`false`	Maakt voorgedefinieerde `transition`s op verschillende componenten mogelijk.
`$enable-hover-media-query`	`true`of `false`(standaard)	Verouderd
`$enable-grid-classes`	`true`(standaard) of`false`	Maakt het genereren van CSS-klassen voor het rastersysteem mogelijk (bijv. `.container`, `.row`, `.col-md-1`, etc.).
`$enable-caret`	`true`(standaard) of`false`	Schakelt pseudo-elementcaret in op `.dropdown-toggle`.
`$enable-print-styles`	`true`(standaard) of`false`	Maakt stijlen mogelijk voor het optimaliseren van afdrukken.

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.

Blauw

Indigo

Purper

Roze

Rood

Oranje

Geel

Groente

Wintertaling

cyaan

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.

In de toekomst streven we ernaar om Sass-kaarten en -variabelen te bieden voor tinten van elke kleur, zoals we hebben gedaan met de onderstaande grijswaardenkleuren.

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 Bootstraps.

primair

Ondergeschikt

Succes

Gevaar

Waarschuwing

Info

Licht

Donker

Grijzen

Een uitgebreide set grijsvariabelen en een Sass-kaart scss/_variables.scssvoor consistente grijstinten in uw project.

100

200

300

400

500

600

700

800

900

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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
  }
}