Theming Bootstrap

Anpassa Bootstrap 4 med våra nya inbyggda Sass-variabler för globala stilpreferenser för enkla teman och komponentbyten.

Introduktion

I Bootstrap 3 drevs teman till stor del av variabla åsidosättningar i LESS, anpassad CSS och en separat temastilmall som vi inkluderade i våra distfiler. Med lite ansträngning kunde man helt omforma utseendet på Bootstrap 3 utan att röra kärnfilerna. Bootstrap 4 ger ett välbekant, men något annorlunda tillvägagångssätt.

Nu åstadkoms teman med Sass-variabler, Sass-kartor och anpassad CSS. Det finns ingen mer dedikerad stilmall för tema; istället kan du aktivera det inbyggda temat för att lägga till övertoningar, skuggor och mer.

Sass

Använd våra Sass-källfiler för att dra fördel av variabler, kartor, mixins och mer när du kompilerar Sass med din egen tillgångspipeline.

Filstruktur

Undvik att ändra Bootstraps kärnfiler när det är möjligt. För Sass betyder det att du skapar din egen stilmall som importerar Bootstrap så att du kan ändra och utöka den. Förutsatt att du använder en pakethanterare som npm, kommer du att ha en filstruktur som ser ut så här:

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

Om du har laddat ner våra källfiler och inte använder en pakethanterare, vill du manuellt ställa in något som liknar den strukturen och hålla Bootstraps källfiler åtskilda från dina egna.

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

Importerar

I din custom.scsskommer du att importera Bootstraps käll Sass-filer. Du har två alternativ: inkludera hela Bootstrap, eller välj de delar du behöver. Vi uppmuntrar det senare, men var medveten om att det finns vissa krav och beroenden mellan våra komponenter. Du måste också inkludera lite JavaScript för våra plugins.

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

Med den inställningen på plats kan du börja modifiera någon av Sass-variablerna och kartorna i din custom.scss. Du kan också börja lägga till delar av Bootstrap under // Optionalavsnittet efter behov. Vi föreslår att du använder hela importstacken från vår bootstrap.scssfil som utgångspunkt.

Variable standardvärden

Varje Sass-variabel i Bootstrap innehåller !defaultflaggan som gör att du kan åsidosätta variabelns standardvärde i din egen Sass utan att ändra Bootstraps källkod. Kopiera och klistra in variabler efter behov, ändra deras värden och ta bort !defaultflaggan. Om en variabel redan har tilldelats kommer den inte att omtilldelas av standardvärdena i Bootstrap.

Du hittar hela listan över Bootstraps variabler i scss/_variables.scss. Vissa variabler är inställda på null, dessa variabler matar inte ut egenskapen om de inte åsidosätts i din konfiguration.

Variabelöverstyrningar måste komma efter att våra funktioner, variabler och mixiner har importerats, men före resten av importerna.

Här är ett exempel som ändrar background-coloroch colorför <body>när du importerar och kompilerar 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

Upprepa vid behov för valfri variabel i Bootstrap, inklusive de globala alternativen nedan.

Kom igång med Bootstrap via npm med vårt startprojekt! Gå till mallförrådet twbs/bootstrap-npm-starter för att se hur du bygger och anpassar Bootstrap i ditt eget npm-projekt. Inkluderar Sass-kompilator, Autoprefixer, Stylelint, PurgeCSS och Bootstrap-ikoner.

Kartor och slingor

Bootstrap 4 innehåller en handfull Sass-kartor, nyckelvärdespar som gör det lättare att generera familjer av relaterade CSS. Vi använder Sass-kartor för våra färger, rutnätsbrytpunkter och mer. Precis som Sass-variabler inkluderar alla Sass-kartor !defaultflaggan och kan åsidosättas och utökas.

Vissa av våra Sass-kartor slås ihop till tomma kartor som standard. Detta görs för att möjliggöra enkel utökning av en given Sass-karta, men kommer till priset av att det blir lite svårare att ta bort föremål från en karta.

Ändra karta

För att ändra en befintlig färg i vår $theme-colorskarta, lägg till följande i din anpassade Sass-fil:

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

Lägg till på kartan

För att lägga till en ny färg till $theme-colors, lägg till den nya nyckeln och värdet:

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

Ta bort från kartan

För att ta bort färger från $theme-colorseller någon annan karta, använd map-remove. Tänk på att du måste infoga den mellan våra krav och alternativ:

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

Nödvändiga nycklar

Bootstrap förutsätter närvaron av vissa specifika nycklar inom Sass-kartor som vi använde och utökar dessa själva. När du anpassar de medföljande kartorna kan du stöta på fel där en specifik Sass-kartas nyckel används.

Till exempel använder vi tangenterna primary, success, och dangerfrån $theme-colorsför länkar, knappar och formulärtillstånd. Att ersätta värdena för dessa nycklar bör inte ge några problem, men att ta bort dem kan orsaka Sass-kompileringsproblem. I dessa fall måste du ändra Sass-koden som använder dessa värden.

Funktioner

Bootstrap använder flera Sass-funktioner, men bara en delmängd är tillämplig på allmänt tema. Vi har inkluderat tre funktioner för att få värden från färgkartorna:

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

Dessa låter dig välja en färg från en Sass-karta ungefär som hur du skulle använda en färgvariabel från v3.

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

Vi har också en annan funktion för att få en viss färgnivå från $theme-colorskartan. Negativa nivåvärden gör färgen ljusare, medan högre nivåer blir mörkare.

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

I praktiken skulle du anropa funktionen och skicka in två parametrar: namnet på färgen från $theme-colors(t.ex. primär eller fara) och en numerisk nivå.

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

Ytterligare funktioner kan läggas till i framtiden eller din egen anpassade Sass för att skapa nivåfunktioner för ytterligare Sass-kartor, eller till och med en generisk sådan om du vill vara mer utförlig.

Färgkontrast

En ytterligare funktion vi inkluderar i Bootstrap är färgkontrastfunktionen, color-yiq. Den använder YIQ-färgrymden för att automatiskt returnera en ljus ( #fff) eller mörk ( #111) kontrastfärg baserat på den angivna basfärgen. Den här funktionen är särskilt användbar för mixins eller loopar där du genererar flera klasser.

Till exempel, för att generera färgprover från vår $theme-colorskarta:

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

Den kan också användas för engångskontrastbehov:

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

Du kan också ange en grundfärg med våra färgkartfunktioner:

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

Escape SVG

Vi använder escape-svgfunktionen för att escape <, >och #tecknen för SVG-bakgrundsbilder. Dessa tecken måste escapes för att korrekt rendera bakgrundsbilderna i IE. Vid användning av escape-svgfunktionen måste data-URI:er anges.

Addera och subtrahera funktioner

Vi använder funktionerna addoch subtractför att omsluta CSS- calcfunktionen. Det primära syftet med dessa funktioner är att undvika fel när ett "enhetslöst" 0värde överförs till ett calcuttryck. Uttryck som calc(10px - 0)kommer att returnera ett fel i alla webbläsare, trots att de är matematiskt korrekta.

Exempel där beräkningen är giltig:

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

Exempel där beräkningen är ogiltig:

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

Anpassa Bootstrap 4 med vår inbyggda anpassade variabelfil och växla enkelt globala CSS-inställningar med nya $enable-*Sass-variabler. Åsidosätt en variabels värde och kompilera om med npm run testefter behov.

Du kan hitta och anpassa dessa variabler för viktiga globala alternativ i Bootstraps scss/_variables.scssfil.

Variabel	Värderingar	Beskrivning
`$spacer`	`1rem`(standard), eller valfritt värde > 0	Anger standardvärdet för spacer för att programmässigt generera våra spacer-verktyg .
`$enable-rounded`	`true`(standard) eller`false`	Aktiverar fördefinierade `border-radius`stilar på olika komponenter.
`$enable-shadows`	`true`eller `false`(standard)	Möjliggör fördefinierade dekorativa `box-shadow`stilar på olika komponenter. Påverkar inte `box-shadow`s som används för fokustillstånd.
`$enable-gradients`	`true`eller `false`(standard)	Aktiverar fördefinierade övertoningar via `background-image`stilar på olika komponenter.
`$enable-transitions`	`true`(standard) eller`false`	Aktiverar fördefinierade `transition`s på olika komponenter.
`$enable-prefers-reduced-motion-media-query`	`true`(standard) eller`false`	Aktiverar `prefers-reduced-motion`mediefrågan , som undertrycker vissa animationer/övergångar baserat på användarnas webbläsare/operativsysteminställningar.
`$enable-hover-media-query`	`true`eller `false`(standard)	Utfasad
`$enable-grid-classes`	`true`(standard) eller`false`	Möjliggör generering av CSS-klasser för nätsystemet (t.ex. , `.container`, `.row`, `.col-md-1`etc.).
`$enable-caret`	`true`(standard) eller`false`	Aktiverar pseudoelement caret på `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(standard) eller`false`	Lägg till "hand"-markör till icke-inaktiverade knappelement.
`$enable-print-styles`	`true`(standard) eller`false`	Möjliggör stilar för att optimera utskrifter.
`$enable-responsive-font-sizes`	`true`eller `false`(standard)	Aktiverar responsiva teckenstorlekar .
`$enable-validation-icons`	`true`(standard) eller`false`	Aktiverar `background-image`ikoner i textinmatningar och vissa anpassade formulär för valideringstillstånd.
`$enable-deprecation-messages`	`true`(standard) eller`false`	Ställ in på för `false`att dölja varningar när du använder någon av de föråldrade mixinerna och funktionerna som är planerade att tas bort i `v5`.

Färg

Många av Bootstraps olika komponenter och verktyg är byggda genom en serie färger som definieras i en Sass-karta. Den här kartan kan loopas över i Sass för att snabbt generera en serie regeluppsättningar.

Alla färger

Alla färger tillgängliga i Bootstrap 4, är tillgängliga som Sass-variabler och en Sass-karta i scss/_variables.scssfil. Detta kommer att utökas i efterföljande mindre släpp för att lägga till ytterligare nyanser, ungefär som gråskalepaletten vi redan inkluderar.

$blått #007bff

$indigo #6610f2

$lila #6f42c1

$rosa #e83e8c

$röd #dc3545

$orange #fd7e14

$gul #ffc107

$grön #28a745

$kricka #20c997

$cyan #17a2b8

Så här kan du använda dessa i din Sass:

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

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

Färgverktygsklasser finns också tillgängliga för inställning coloroch background-color.

I framtiden kommer vi att sikta på att tillhandahålla Sass-kartor och variabler för nyanser av varje färg som vi har gjort med gråskalefärgerna nedan.

Temafärger

Vi använder en delmängd av alla färger för att skapa en mindre färgpalett för att generera färgscheman, även tillgänglig som Sass-variabler och en Sass-karta i Bootstraps scss/_variables.scssfil.

$primär #007bff

$sekundär #6c757d

$framgång #28a745

$fara #dc3545

$varning #ffc107

$info #17a2b8

$ljus #f8f9fa

$mörkt #343a40

Gråa

En omfattande uppsättning grå variabler och en Sass-karta scss/_variables.scssför konsekventa nyanser av grått i hela ditt projekt. Observera att dessa är "cool grå", som tenderar mot en subtil blå ton, snarare än neutrala gråtoner.

$grå-100 #f8f9fa

$grå-200 #e9ecef

$grå-300 #dee2e6

$grå-400 #ced4da

$grå-500 #adb5bd

$grå-600 #6c757d

$grå-700 #495057

$grå-800 #343a40

$grå-900 #212529

Inom scss/_variables.scsshittar du Bootstraps färgvariabler och Sass-karta. Här är ett exempel på $colorsSass-kartan:

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

Lägg till, ta bort eller ändra värden i kartan för att uppdatera hur de används i många andra komponenter. Tyvärr använder inte alla komponenter denna Sass-karta för närvarande. Framtida uppdateringar kommer att sträva efter att förbättra detta. Tills dess, planera att använda ${color}variablerna och denna Sass-karta.

Komponenter

Många av Bootstraps komponenter och verktyg är byggda med @eachloopar som itererar över en Sass-karta. Detta är särskilt användbart för att generera varianter av en komponent av vår $theme-colorsoch skapa responsiva varianter för varje brytpunkt. När du anpassar dessa Sass-kartor och kompilerar om, kommer du automatiskt att se dina ändringar återspeglas i dessa loopar.

Modifierare

Många av Bootstraps komponenter är byggda med en basmodifieringsklassmodell. Detta innebär att huvuddelen av stilen finns i en basklass (t.ex. .btn) medan stilvariationer är begränsade till modifieringsklasser (t.ex. .btn-danger). Dessa modifieringsklasser är byggda från $theme-colorskartan för att anpassa antalet och namnet på våra modifieringsklasser.

Här är två exempel på hur vi loopar över $theme-colorskartan för att generera modifierare till .alertkomponenten och alla våra .bg-*bakgrundsverktyg.

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

Mottaglig

Dessa Sass-loopar är inte heller begränsade till färgkartor. Du kan också skapa responsiva varianter av dina komponenter eller verktyg. Ta till exempel våra responsiva textjusteringsverktyg där vi blandar en @eachloop för $grid-breakpointsSass-kartan med en mediefråga.

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

Om du skulle behöva ändra din $grid-breakpoints, kommer dina ändringar att gälla för alla loopar som itererar över den kartan.

CSS-variabler

Bootstrap 4 innehåller cirka två dussin anpassade CSS-egenskaper (variabler) i sin kompilerade CSS. Dessa ger enkel åtkomst till vanliga värden som våra temafärger, brytpunkter och primära teckensnittsstaplar när du arbetar i din webbläsares Inspector, en kodsandlåda eller allmän prototyp.

Tillgängliga variabler

Här är variablerna vi inkluderar (observera att det :rootkrävs). De finns i vår _root.scssfil.

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

Exempel

CSS-variabler erbjuder liknande flexibilitet som Sass variabler, men utan behov av kompilering innan de serveras till webbläsaren. Till exempel, här återställer vi vår sidas teckensnitt och länkstilar med CSS-variabler.

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

Brytpunktsvariabler

Även om vi ursprungligen inkluderade brytpunkter i våra CSS-variabler (t.ex. --breakpoint-md), stöds dessa inte i mediefrågor , men de kan fortfarande användas inom regeluppsättningar i mediefrågor. Dessa brytpunktsvariabler finns kvar i den kompilerade CSS för bakåtkompatibilitet eftersom de kan användas av JavaScript. Läs mer i specifikationen .

Här är ett exempel på vad som inte stöds:

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

Och här är ett exempel på vad som stöds:

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