in English

Theming Bootstrap

Tilpas Bootstrap 4 med vores nye indbyggede Sass-variabler til globale stilpræferencer for nemme temaer og komponentændringer.

Introduktion

I Bootstrap 3 var tematikken stort set drevet af variable tilsidesættelser i LESS, tilpasset CSS og et separat temastilark, som vi inkluderede i vores distfiler. Med en vis indsats kunne man fuldstændig redesigne udseendet af Bootstrap 3 uden at røre ved kernefilerne. Bootstrap 4 giver en velkendt, men lidt anderledes tilgang.

Nu udføres tematisering af Sass-variabler, Sass-kort og tilpasset CSS. Der er ikke mere dedikeret tema stylesheet; i stedet kan du aktivere det indbyggede tema for at tilføje gradienter, skygger og mere.

Sass

Brug vores Sass-kildefiler til at drage fordel af variabler, kort, mixins og mere, når du kompilerer Sass ved hjælp af din egen aktivpipeline.

Filstruktur

Når det er muligt, undgå at ændre Bootstraps kernefiler. For Sass betyder det at oprette dit eget stylesheet, der importerer Bootstrap, så du kan ændre og udvide det. Hvis du antager, at du bruger en pakkehåndtering som npm, vil du have en filstruktur, der ser sådan ud:

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

Hvis du har downloadet vores kildefiler og ikke bruger en pakkehåndtering, vil du manuelt konfigurere noget, der ligner den struktur, og holde Bootstraps kildefiler adskilt fra dine egne.

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

Importerer

I din custom.scssvil du importere Bootstraps kilde Sass-filer. Du har to muligheder: medtag hele Bootstrap, eller vælg de dele, du har brug for. Vi opfordrer til sidstnævnte, men vær opmærksom på, at der er nogle krav og afhængigheder på tværs af vores komponenter. Du skal også inkludere noget JavaScript til vores 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 opsætning på plads kan du begynde at ændre enhver af Sass-variablerne og -kortene i din custom.scss. Du kan også begynde at tilføje dele af Bootstrap under // Optionalsektionen efter behov. Vi foreslår, at du bruger den fulde importstak fra vores bootstrap.scssfil som dit udgangspunkt.

Variable standardindstillinger

Hver Sass-variabel i Bootstrap inkluderer !defaultflaget, der giver dig mulighed for at tilsidesætte variablens standardværdi i din egen Sass uden at ændre Bootstraps kildekode. Kopier og indsæt variabler efter behov, rediger deres værdier, og fjern !defaultflaget. Hvis en variabel allerede er blevet tildelt, vil den ikke blive gentildelt af standardværdierne i Bootstrap.

Du finder den komplette liste over Bootstraps variabler i scss/_variables.scss. Nogle variabler er indstillet til null, disse variabler udsender ikke egenskaben, medmindre de er tilsidesat i din konfiguration.

Variable tilsidesættelser skal komme efter vores funktioner, variabler og mixins er importeret, men før resten af ​​importen.

Her er et eksempel, der ændrer background-colorog colorfor, <body>når du importerer og kompilerer 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

Gentag efter behov for enhver variabel i Bootstrap, inklusive de globale muligheder nedenfor.

Kom i gang med Bootstrap via npm med vores startprojekt! Gå til twbs/bootstrap-npm-starter skabelonlageret for at se, hvordan du bygger og tilpasser Bootstrap i dit eget npm-projekt. Inkluderer Sass-kompiler, Autoprefixer, Stylelint, PurgeCSS og Bootstrap-ikoner.

Kort og sløjfer

Bootstrap 4 inkluderer en håndfuld Sass-kort, nøgleværdipar, der gør det nemmere at generere familier af relateret CSS. Vi bruger Sass-kort til vores farver, gitterbrudpunkter og mere. Ligesom Sass-variabler inkluderer alle Sass-kort !defaultflaget og kan tilsidesættes og udvides.

Nogle af vores Sass-kort er som standard flettet sammen til tomme kort. Dette gøres for at tillade let udvidelse af et givet Sass-kort, men det kommer på bekostning af at gøre det lidt vanskeligere at fjerne elementer fra et kort.

Rediger kort

For at ændre en eksisterende farve på vores $theme-colorskort skal du tilføje følgende til din tilpassede Sass-fil:

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

Tilføj til kort

For at tilføje en ny farve til $theme-colorsskal du tilføje den nye nøgle og værdi:

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

Fjern fra kortet

For at fjerne farver fra $theme-colorseller et hvilket som helst andet kort, brug map-remove. Vær opmærksom på, at du skal indsætte det mellem vores krav og muligheder:

// 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ødvendige nøgler

Bootstrap antager tilstedeværelsen af ​​nogle specifikke nøgler i Sass-kort, da vi brugte og udvider disse selv. Når du tilpasser de inkluderede kort, kan du støde på fejl, hvor en specifik Sass-kortnøgle bliver brugt.

For eksempel bruger vi tasterne primary, success, og dangerfra $theme-colorstil links, knapper og formulartilstande. Udskiftning af værdierne for disse nøgler burde ikke give nogen problemer, men fjernelse af dem kan forårsage problemer med Sass-kompilering. I disse tilfælde skal du ændre den Sass-kode, der gør brug af disse værdier.

Funktioner

Bootstrap bruger adskillige Sass-funktioner, men kun en delmængde kan anvendes til generelle temaer. Vi har inkluderet tre funktioner til at hente værdier fra farvekortene:

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

Disse giver dig mulighed for at vælge én farve fra et Sass-kort, ligesom du ville bruge en farvevariabel fra v3.

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

Vi har også en anden funktion til at få et bestemt farveniveau fra $theme-colorskortet. Negative niveauværdier vil gøre farven lysere, mens højere niveauer bliver mørkere.

@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 praksis ville du kalde funktionen og sende to parametre ind: navnet på farven fra $theme-colors(f.eks. primær eller fare) og et numerisk niveau.

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

Yderligere funktioner kan tilføjes i fremtiden eller din egen tilpassede Sass for at skabe niveaufunktioner til yderligere Sass-kort, eller endda en generisk, hvis du ville være mere udførlig.

Farvekontrast

En ekstra funktion, vi inkluderer i Bootstrap, er farvekontrastfunktionen, color-yiq. Den bruger YIQ-farverummet til automatisk at returnere en lys ( #fff) eller mørk ( #111) kontrastfarve baseret på den angivne grundfarve. Denne funktion er især nyttig til mixins eller loops, hvor du genererer flere klasser.

For eksempel, for at generere farveprøver fra vores $theme-colorskort:

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

Den kan også bruges til engangskontrastbehov:

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

Du kan også angive en grundfarve med vores farvekortfunktioner:

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

Undslip SVG

Vi bruger escape-svgfunktionen til at undslippe tegnene <, >og #til SVG-baggrundsbilleder. Disse tegn skal escapes for korrekt at gengive baggrundsbillederne i IE. Ved brug af escape-svgfunktionen skal data-URI'er angives.

Tilføj og subtraher funktioner

Vi bruger funktionerne addog subtracttil at ombryde CSS- calcfunktionen. Det primære formål med disse funktioner er at undgå fejl, når en "enhedsløs" 0værdi overføres til et calcudtryk. Udtryk som calc(10px - 0)vil returnere en fejl i alle browsere, selvom de er matematisk korrekte.

Eksempel hvor beregningen er gyldig:

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

Eksempel hvor beregningen er ugyldig:

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

Tilpas Bootstrap 4 med vores indbyggede tilpassede variabelfil, og skift nemt globale CSS-præferencer med nye $enable-*Sass-variabler. Tilsidesæt en variabels værdi, og kompiler igen med npm run testefter behov.

Du kan finde og tilpasse disse variabler til vigtige globale muligheder i Bootstraps scss/_variables.scssfil.

Variabel Værdier Beskrivelse
$spacer 1rem(standard) eller en hvilken som helst værdi > 0 Angiver standardafstandsværdien til programmæssig generering af vores spacerværktøjer .
$enable-rounded true(standard) ellerfalse Aktiverer foruddefinerede border-radiusstilarter på forskellige komponenter.
$enable-shadows trueeller false(standard) Muliggør foruddefinerede dekorative box-shadowstilarter på forskellige komponenter. Påvirker ikke box-shadows, der bruges til fokustilstande.
$enable-gradients trueeller false(standard) Aktiverer foruddefinerede gradienter via background-imagestilarter på forskellige komponenter.
$enable-transitions true(standard) ellerfalse Aktiverer foruddefinerede transitions på forskellige komponenter.
$enable-prefers-reduced-motion-media-query true(standard) ellerfalse Aktiverer prefers-reduced-motionmedieforespørgslen , som undertrykker visse animationer/overgange baseret på brugernes browser-/operativsystempræferencer.
$enable-hover-media-query trueeller false(standard) Forældet
$enable-grid-classes true(standard) ellerfalse Aktiverer generering af CSS-klasser til netsystemet (f.eks. .container, .row, .col-md-1, osv.).
$enable-caret true(standard) ellerfalse Aktiverer pseudo element caret på .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(standard) ellerfalse Tilføj "hånd"-markør til ikke-deaktiverede knapelementer.
$enable-print-styles true(standard) ellerfalse Aktiverer stilarter til optimering af udskrivning.
$enable-responsive-font-sizes trueeller false(standard) Aktiverer responsive skriftstørrelser .
$enable-validation-icons true(standard) ellerfalse Aktiverer background-imageikoner i tekstinput og nogle brugerdefinerede formularer til valideringstilstande.
$enable-deprecation-messages true(standard) ellerfalse Indstil til falsefor at skjule advarsler, når du bruger nogen af ​​de forældede mixins og funktioner, der er planlagt til at blive fjernet i v5.

Farve

Mange af Bootstraps forskellige komponenter og hjælpeprogrammer er bygget gennem en række farver defineret i et Sass-kort. Dette kort kan løkkes i Sass for hurtigt at generere en række regelsæt.

Alle farver

Alle farver, der er tilgængelige i Bootstrap 4, er tilgængelige som Sass-variabler og et Sass-kort i scss/_variables.scssfil. Dette vil blive udvidet i efterfølgende mindre udgivelser for at tilføje yderligere nuancer, ligesom den gråtonepalet , vi allerede inkluderer.

$blå #007bff
$indigo #6610f2
$lilla #6f42c1
$pink #e83e8c
$rød #dc3545
$orange #fd7e14
$gul #ffc107
$grøn #28a745
$blågrøn #20c997
$cyan #17a2b8

Sådan kan du bruge disse i din Sass:

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

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

Farvefunktionsklasser er også tilgængelige til indstilling colorogbackground-color .

I fremtiden vil vi tilstræbe at levere Sass-kort og variabler for nuancer af hver farve, som vi har gjort med gråtonefarverne nedenfor.

Tema farver

Vi bruger et undersæt af alle farver til at skabe en mindre farvepalet til generering af farveskemaer, også tilgængelig som Sass-variabler og et Sass-kort i Bootstraps scss/_variables.scssfil.

$primær #007bff
$sekundær #6c757d
$succes #28a745
$fare #dc3545
$advarsel #ffc107
$info #17a2b8
$lys #f8f9fa
$mørke #343a40

Grå

Et ekspansivt sæt af grå variable og et Sass-kort scss/_variables.scsstil ensartede gråtoner på tværs af dit projekt. Bemærk, at disse er "seje grå", som har en tendens til en subtil blå tone, snarere end neutrale 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

Indenfor scss/_variables.scssfinder du Bootstraps farvevariabler og Sass-kort. Her er et eksempel på $colorsSass-kortet:

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

Tilføj, fjern eller rediger værdier på kortet for at opdatere, hvordan de bruges i mange andre komponenter. Desværre på nuværende tidspunkt er det ikke alle komponenter, der bruger dette Sass-kort. Fremtidige opdateringer vil stræbe efter at forbedre dette. Indtil da, planlæg at gøre brug af ${color}variablerne og dette Sass-kort.

Komponenter

Mange af Bootstraps komponenter og hjælpeprogrammer er bygget med @eachloops, der itererer over et Sass-kort. Dette er især nyttigt til at generere varianter af en komponent af vores $theme-colorsog skabe responsive varianter for hvert breakpoint. Når du tilpasser disse Sass-kort og kompilerer igen, vil du automatisk se dine ændringer afspejlet i disse loops.

Modifikatorer

Mange af Bootstraps komponenter er bygget med en base-modifier klasse tilgang. Dette betyder, at hovedparten af ​​stylingen er indeholdt i en basisklasse (f.eks. .btn), mens stilvariationer er begrænset til modifikatorklasser (f.eks. .btn-danger). Disse modifikatorklasser er bygget ud fra $theme-colorskortet for at tilpasse antallet og navnet på vores modifikatorklasser.

Her er to eksempler på, hvordan vi looper over $theme-colorskortet for at generere modifikatorer til .alertkomponenten og alle vores .bg-*baggrundsværktøjer.

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

Lydhør

Disse Sass-loops er heller ikke begrænset til farvekort. Du kan også generere responsive variationer af dine komponenter eller hjælpeprogrammer. Tag for eksempel vores responsive tekstjusteringsværktøjer, hvor vi blander en @eachloop til $grid-breakpointsSass-kortet med en medieforespørgsel.

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

Hvis du har brug for at ændre din $grid-breakpoints, vil dine ændringer gælde for alle de loops, der itererer over det pågældende kort.

CSS variabler

Bootstrap 4 inkluderer omkring to dusin brugerdefinerede CSS-egenskaber (variabler) i dens kompilerede CSS. Disse giver nem adgang til almindeligt anvendte værdier som vores temafarver, brudpunkter og primære skrifttyper, når du arbejder i din browsers Inspector, en kodesandkasse eller generel prototyping.

Tilgængelige variabler

Her er de variabler, vi inkluderer (bemærk, at det :rooter påkrævet). De er placeret i vores _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;
}

Eksempler

CSS-variabler giver samme fleksibilitet som Sass' variabler, men uden behov for kompilering, før de serveres til browseren. For eksempel nulstiller vi vores sides skrifttype og linkstile med CSS-variabler.

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

Breakpoint variabler

Selvom vi oprindeligt inkluderede brudpunkter i vores CSS-variabler (f.eks. --breakpoint-md), understøttes disse ikke i medieforespørgsler , men de kan stadig bruges inden for regelsæt i medieforespørgsler. Disse brudpunktvariabler forbliver i den kompilerede CSS for bagudkompatibilitet, da de kan bruges af JavaScript. Lær mere i specifikationerne .

Her er et eksempel på, hvad der ikke understøttes:

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

Og her er et eksempel på, hvad der understøttes:

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