Source

Theming Bootstrap

Prispôsobte si Bootstrap 4 pomocou našich nových vstavaných premenných Sass pre globálne preferencie štýlu pre jednoduché zmeny tém a komponentov.

Úvod

V Bootstrap 3 bola téma do značnej miery riadená prepísaním premenných v LESS, vlastným CSS a samostatnou šablónou so štýlmi témy, ktorú sme zahrnuli do našich distsúborov. S určitým úsilím by sa dal úplne prepracovať vzhľad Bootstrapu 3 bez toho, aby ste sa dotkli základných súborov. Bootstrap 4 poskytuje známy, ale mierne odlišný prístup.

Témy teraz zabezpečujú premenné Sass, mapy Sass a vlastné CSS. Nie je tu viac vyhradený šablón so štýlmi; namiesto toho môžete povoliť vstavanú tému a pridať prechody, tiene a ďalšie.

Sass

Využite naše zdrojové súbory Sass a využite výhody premenných, máp, mixov a ďalších. V našej zostave sme zvýšili presnosť zaokrúhľovania Sass na 6 (v predvolenom nastavení je to 5), aby sme predišli problémom so zaokrúhľovaním prehliadača.

Štruktúra súboru

Vždy, keď je to možné, vyhnite sa úpravám základných súborov Bootstrapu. Pre Sass to znamená vytvorenie vlastnej šablóny so štýlmi, ktorá importuje Bootstrap, aby ste ju mohli upravovať a rozširovať. Za predpokladu, že používate správcu balíkov, ako je npm, budete mať štruktúru súborov, ktorá vyzerá takto:

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

Ak ste si stiahli naše zdrojové súbory a nepoužívate správcu balíkov, budete chcieť manuálne nastaviť niečo podobné tejto štruktúre a ponechať zdrojové súbory Bootstrapu oddelené od vašich vlastných.

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

Importuje sa

Do svojho custom.scss, importujete zdrojové súbory Sass Bootstrapu. Máte dve možnosti: zahrnúť celý Bootstrap alebo vybrať časti, ktoré potrebujete. Odporúčame to druhé, aj keď si uvedomte, že medzi našimi komponentmi existujú určité požiadavky a závislosti. Budete tiež musieť zahrnúť nejaký JavaScript pre naše doplnky.

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

S týmto nastavením môžete začať upravovať ktorúkoľvek z premenných a máp Sass vo vašom súbore custom.scss. Podľa potreby môžete tiež začať pridávať časti Bootstrapu do // Optionalsekcie. bootstrap.scssAko východiskový bod odporúčame použiť celý zásobník importu z nášho súboru.

Predvolené hodnoty premenných

Každá premenná Sass v Bootstrap 4 obsahuje !defaultpríznak, ktorý vám umožňuje prepísať predvolenú hodnotu premennej vo vašom vlastnom Sass bez úpravy zdrojového kódu Bootstrapu. Skopírujte a prilepte premenné podľa potreby, upravte ich hodnoty a odstráňte !defaultpríznak. Ak už bola premenná priradená, nebude priradená podľa predvolených hodnôt v Bootstrape.

Kompletný zoznam premenných Bootstrapu nájdete v scss/_variables.scss.

Prepisy premenných v rámci toho istého súboru Sass môžu byť pred alebo po predvolených premenných. Pri prepisovaní v súboroch Sass však musia prepisy prísť pred importovaním súborov Sass z Bootstrapu.

Tu je príklad, ktorý mení background-colora colorpre <body>pri importovaní a kompilácii Bootstrap cez npm:

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

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

Opakujte podľa potreby pre akúkoľvek premennú v Bootstrap, vrátane globálnych možností nižšie.

Mapy a slučky

Bootstrap 4 obsahuje niekoľko máp Sass, párov kľúčových hodnôt, ktoré uľahčujú vytváranie rodín súvisiacich CSS. Sass mapy používame pre naše farby, prerušovacie body mriežky a ďalšie. Rovnako ako premenné Sass, všetky mapy Sass obsahujú !defaultpríznak a možno ich prepísať a rozšíriť.

Niektoré z našich máp Sass sú štandardne zlúčené do prázdnych. Toto sa robí, aby sa umožnilo jednoduché rozšírenie danej mapy Sass, ale za cenu toho, že odstraňovanie položiek z mapy bude trochu zložitejšie.

Upravte mapu

Ak chcete upraviť existujúcu farbu na našej $theme-colorsmape, pridajte do svojho vlastného súboru Sass nasledovné:

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

Pridať na mapu

Ak chcete pridať novú farbu do $theme-colors, pridajte nový kľúč a hodnotu:

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

Odstrániť z mapy

Ak chcete odstrániť farby z $theme-colorsmapy alebo akejkoľvek inej mapy, použite map-remove. Uvedomte si, že ho musíte vložiť medzi naše požiadavky a možnosti:

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

Požadované kľúče

Bootstrap predpokladá prítomnosť niektorých špecifických kľúčov v mapách Sass, ktoré sme používali a sami ich rozširujeme. Pri prispôsobovaní zahrnutých máp sa môžete stretnúť s chybami, keď sa používa špecifický kľúč mapy Sass.

Napríklad používame klávesy primary, success, a dangerz $theme-colorspre odkazy, tlačidlá a stavy formulárov. Nahradenie hodnôt týchto kľúčov by nemalo predstavovať žiadne problémy, ale ich odstránenie môže spôsobiť problémy s kompiláciou Sass. V týchto prípadoch budete musieť upraviť kód Sass, ktorý tieto hodnoty využíva.

Funkcie

Bootstrap využíva niekoľko funkcií Sass, ale iba podmnožina je použiteľná pre všeobecné tematické oblasti. Zahrnuli sme tri funkcie na získanie hodnôt z farebných máp:

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

Umožňujú vám vybrať si jednu farbu z mapy Sass, podobne ako by ste použili premennú farby z v3.

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

Máme tiež ďalšiu funkciu na získanie konkrétnej úrovne farby z $theme-colorsmapy. Záporné hodnoty úrovne zosvetlia farbu, zatiaľ čo vyššie úrovne stmavia.

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

V praxi by ste zavolali funkciu a odovzdali dva parametre: názov farby z $theme-colors(napr. primárna alebo nebezpečná) a číselnú úroveň.

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

V budúcnosti by mohli byť pridané ďalšie funkcie alebo váš vlastný Sass na vytvorenie funkcií úrovní pre ďalšie mapy Sass, alebo dokonca všeobecnú, ak chcete byť podrobnejší.

Farebný kontrast

Ďalšou funkciou, ktorú zahrňujeme do Bootstrapu, je funkcia kontrastu farieb, color-yiq. Využíva farebný priestor YIQ na automatické vrátenie svetlej ( #fff) alebo tmavej ( #111) kontrastnej farby na základe špecifikovanej základnej farby. Táto funkcia je obzvlášť užitočná pre mixiny alebo cykly, kde generujete viacero tried.

Ak chcete napríklad vygenerovať vzorky farieb z našej $theme-colorsmapy:

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

Môže sa použiť aj na jednorazové potreby kontrastu:

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

Môžete tiež určiť základnú farbu pomocou našich funkcií mapy farieb:

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

Možnosti Sass

Prispôsobte si Bootstrap 4 pomocou nášho vstavaného súboru vlastných premenných a jednoducho prepínajte globálne preferencie CSS pomocou nových $enable-*premenných Sass. Prepíšte hodnotu premennej a npm run testpodľa potreby ju prekompilujte.

Tieto premenné môžete nájsť a prispôsobiť pre kľúčové globálne možnosti v scss/_variables.scsssúbore Bootstrap.

Variabilné	hodnoty	Popis
`$spacer`	`1rem`(predvolené) alebo akákoľvek hodnota > 0	Určuje predvolenú hodnotu medzerníka na programové generovanie našich pomôcok medzerníka .
`$enable-rounded`	`true`(predvolené) alebo`false`	Umožňuje preddefinované `border-radius`štýly na rôznych komponentoch.
`$enable-shadows`	`true`alebo `false`(predvolené)	Umožňuje preddefinované `box-shadow`štýly na rôznych komponentoch.
`$enable-gradients`	`true`alebo `false`(predvolené)	Umožňuje preddefinované prechody prostredníctvom `background-image`štýlov na rôznych komponentoch.
`$enable-transitions`	`true`(predvolené) alebo`false`	Umožňuje preddefinované `transition`s na rôznych komponentoch.
`$enable-prefers-reduced-motion-media-query`	`true`(predvolené) alebo`false`	Povolí `prefers-reduced-motion`dopyt na médiá , ktorý potláča určité animácie/prechody na základe preferencií prehliadača/operačného systému používateľa.
`$enable-hover-media-query`	`true`alebo `false`(predvolené)	Zastarané
`$enable-grid-classes`	`true`(predvolené) alebo`false`	Umožňuje generovanie tried CSS pre mriežkový systém (napr. `.container`, `.row`, `.col-md-1`, atď.).
`$enable-caret`	`true`(predvolené) alebo`false`	Povolí striešku pseudoprvku na `.dropdown-toggle`.
`$enable-print-styles`	`true`(predvolené) alebo`false`	Umožňuje štýly na optimalizáciu tlače.
`$enable-validation-icons`	`true`(predvolené) alebo`false`	Povolí `background-image`ikony v rámci textových vstupov a niektorých vlastných formulárov pre stavy overenia.

Farba

Mnoho rôznych komponentov a nástrojov Bootstrapu je vytvorených prostredníctvom série farieb definovaných na mape Sass. Túto mapu je možné prepínať v Sass a rýchlo generovať sériu sád pravidiel.

Všetky farby

Všetky farby dostupné v Bootstrap 4 sú dostupné ako premenné Sass a mapa Sass v scss/_variables.scsssúbore. Toto bude rozšírené v nasledujúcich menších vydaniach, aby sa pridali ďalšie odtiene, podobne ako paleta odtieňov sivej , ktorú už zahŕňame.

Modrá

Indigo

Fialová

Ružová

Červená

Oranžová

žltá

zelená

Modrozelený

Tyrkysový

Tu je návod, ako ich môžete použiť vo svojom Sass:

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

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

K dispozícii sú aj farebné úžitkové triedy pre nastavenie colora background-color.

V budúcnosti sa budeme snažiť poskytovať mapy Sass a premenné pre odtiene každej farby, ako sme to urobili s farbami v odtieňoch šedej nižšie.

Farby motívu

Používame podmnožinu všetkých farieb na vytvorenie menšej farebnej palety na generovanie farebných schém, ktoré sú dostupné aj ako premenné Sass a mapa Sass v scss/_variables.scsssúbore Bootstraps.

Primárny

Sekundárne

Úspech

Nebezpečenstvo

POZOR

Info

Svetlo

Tmavý

Grays

Rozsiahla sada premenných šedej a mapa Sass scss/_variables.scsspre konzistentné odtiene šedej vo vašom projekte. Všimnite si, že ide o „chladné šedé“, ktoré majú tendenciu skôr k jemnému modrému tónu než k neutrálnym šedým.

100

200

300

400

500

600

700

800

900

V rámci scss/_variables.scss, nájdete farebné premenné Bootstrapu a mapu Sass. Tu je príklad $colorsmapy Sass:

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

Pridajte, odstráňte alebo upravte hodnoty v rámci mapy, aby ste aktualizovali spôsob, akým sa používajú v mnohých iných komponentoch. Bohužiaľ v súčasnosti nie každý komponent využíva túto mapu Sass. Budúce aktualizácie sa budú snažiť toto vylepšiť. Dovtedy plánujte využívať ${color}premenné a túto mapu Sass.

Komponenty

Mnoho komponentov a pomôcok Bootstrapu je vytvorených pomocou @eachslučiek, ktoré sa opakujú cez mapu Sass. Toto je obzvlášť užitočné pri generovaní variantov komponentu našimi $theme-colorsa vytváraní responzívnych variantov pre každý bod prerušenia. Keď si tieto mapy Sass prispôsobíte a prekompilujete, vaše zmeny sa automaticky prejavia v týchto slučkách.

Modifikátory

Mnohé z komponentov Bootstrapu sú zostavené s prístupom triedy modifikátorov základne. To znamená, že väčšina štýlu je obsiahnutá v základnej triede (napr. .btn), zatiaľ čo variácie štýlu sú obmedzené na triedy modifikátorov (napr. .btn-danger). Tieto triedy modifikátorov sú vytvorené z $theme-colorsmapy, aby bolo možné prispôsobiť počet a názov našich tried modifikátorov.

Tu sú dva príklady toho, ako prechádzame cez $theme-colorsmapu, aby sme generovali modifikátory .alertkomponentu a všetkých našich .bg-*nástrojov na pozadí.

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

Responzívne

Tieto slučky Sass nie sú obmedzené ani na farebné mapy. Môžete tiež generovať responzívne variácie vašich komponentov alebo pomôcok. Vezmime si napríklad naše responzívne nástroje na zarovnanie textu, kde kombinujeme @eachslučku pre $grid-breakpointsmapu Sass s mediálnym dopytom.

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

Ak by ste potrebovali upraviť svoje $grid-breakpoints, vaše zmeny sa použijú na všetky cykly opakujúce sa na tejto mape.

CSS premenné

Bootstrap 4 obsahuje približne dva tucty vlastných vlastností (premenných) CSS vo svojom zostavenom CSS. Poskytujú jednoduchý prístup k bežne používaným hodnotám, ako sú farby motívov, body prerušenia a zásobníky primárnych písiem pri práci v inšpektorovi prehliadača, v karanténe kódu alebo pri všeobecnom prototypovaní.

Dostupné premenné

Tu sú premenné, ktoré zahŕňame (všimnite si, že :rootje to povinné). Nachádzajú sa v našom _root.scsssúbore.

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

Príklady

Premenné CSS ponúkajú podobnú flexibilitu ako premenné Sass, ale bez potreby kompilácie pred ich doručením do prehliadača. Tu napríklad obnovujeme písmo a štýly odkazov našej stránky pomocou premenných CSS.

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

Premenné bodu zlomu

Aj keď sme pôvodne zahrnuli body prerušenia do našich premenných CSS (napr. --breakpoint-md), tieto nie sú podporované v mediálnych dopytoch , ale stále ich možno použiť v rámci skupín pravidiel v mediálnych dopytoch. Tieto premenné bodu prerušenia zostávajú v zostavenom CSS kvôli spätnej kompatibilite, keďže ich môže používať JavaScript. Viac sa dozviete v špecifikácii .

Tu je príklad toho , čo nie je podporované:

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

A tu je príklad toho, čo je podporované:

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