in English

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 na využitie premenných, máp, mixov a ďalších pri kompilácii Sass pomocou vlastného kanála aktív.

Š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. Podporujeme 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

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

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 Bootstrape 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. Niektoré premenné sú nastavené na null, tieto premenné nevydávajú vlastnosť, pokiaľ nie sú prepísané vo vašej konfigurácii.

Prepisy premenných musia prísť po importovaní našich funkcií, premenných a mixinov, ale pred zvyškom importov.

Tu je príklad, ktorý mení background-colora colorpre <body>pri importovaní a kompilácii Bootstrap cez 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

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

Začnite s Bootstrap cez npm s naším štartovacím projektom! Prejdite do úložiska šablón twbs/bootstrap-npm-starter a zistite, ako vytvoriť a prispôsobiť Bootstrap vo svojom vlastnom projekte npm. Obsahuje prekladač Sass, Autoprefixer, Stylelint, PurgeCSS a ikony Bootstrap.

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 ľahké 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ú do Bootstrapu zaraďujeme, 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`
}

Únik SVG

Túto funkciu používame escape-svgna únik znakov <, >a #pre obrázky na pozadí SVG. Aby sa obrázky na pozadí v IE správne vykreslili, je potrebné tieto znaky escapovať. Pri použití escape-svgfunkcie je potrebné uviesť identifikátory URI údajov.

Funkcie sčítania a odčítania

Na zabalenie funkcie CSS používame funkcie adda . Primárnym účelom týchto funkcií je vyhnúť sa chybám, keď sa do výrazu prenáša hodnota „bez jednotiek“. Výrazy ako vracajú chybu vo všetkých prehliadačoch, aj keď sú matematicky správne.subtractcalc0calccalc(10px - 0)

Príklad, kde je výpočet platný:

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

Príklad, keď je výpočet neplatný:

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

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é) alebofalse Umožňuje preddefinované border-radiusštýly na rôznych komponentoch.
$enable-shadows truealebo false(predvolené) Umožňuje preddefinované dekoratívne box-shadowštýly na rôznych komponentoch. Nemá vplyv na box-shadows používaný pre stavy zaostrenia.
$enable-gradients truealebo false(predvolené) Umožňuje preddefinované prechody prostredníctvom background-imageštýlov na rôznych komponentoch.
$enable-transitions true(predvolené) alebofalse Umožňuje preddefinované transitions na rôznych komponentoch.
$enable-prefers-reduced-motion-media-query true(predvolené) alebofalse Povolí prefers-reduced-motiondopyt 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 truealebo false(predvolené) Zastarané
$enable-grid-classes true(predvolené) alebofalse Umožňuje generovanie tried CSS pre mriežkový systém (napr. .container, .row, .col-md-1, atď.).
$enable-caret true(predvolené) alebofalse Povolí striešku pseudoprvku na .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(predvolené) alebofalse Pridajte kurzor „ruky“ k nezakázaným prvkom tlačidiel.
$enable-print-styles true(predvolené) alebofalse Umožňuje štýly na optimalizáciu tlače.
$enable-responsive-font-sizes truealebo false(predvolené) Umožňuje responzívne veľkosti písma .
$enable-validation-icons true(predvolené) alebofalse Povolí background-imageikony v rámci textových vstupov a niektoré vlastné formuláre pre stavy overenia.
$enable-deprecation-messages true(predvolené) alebofalse Nastavte na false, ak chcete skryť varovania pri používaní akýchkoľvek zastaraných mixinov a funkcií, ktorých odstránenie sa plánuje v v5.

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á #007bff
$indigo #6610f2
$fialová #6f42c1
$ružová #e83e8c
$red #dc3545
$oranžová #fd7e14
$žltá #ffc107
$zelená #28a745
$teal #20c997
$ azúrová #17a2b8

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 sivej 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 Bootstrap.

$primary #007bff
$sekundárne #6c757d
$úspech #28a745
$nebezpečenstvo #dc3545
$varovanie #ffc107
$info #17a2b8
$svetlo #f8f9fa
$tmavý #343a40

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.

šedá - 100 dolárov #f8f9fa
šedá - 200 dolárov #e9ecef
šedá - 300 dolárov #dee2e6
šedá - 400 dolárov #ced4da
šedá - 500 dolárov #adb5bd
šedá - 600 dolárov #6c757d
šedá - 700 dolárov #495057
šedá - 800 dolárov #343a40
šedá - 900 dolárov #212529

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 so @eachslučkami, 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 zmiešame @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í CSS (premenných) 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, "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;
}

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 našej stránky a štýly odkazov 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);
  }
}