in English

Theming Bootstrap

Přizpůsobte si Bootstrap 4 pomocí našich nových vestavěných proměnných Sass pro globální preference stylu pro snadné změny témat a komponent.

Úvod

V Bootstrap 3 bylo motivování z velké části řízeno přepsáním proměnných v LESS, vlastním CSS a samostatnou šablonou stylů motivu, kterou jsme zahrnuli do našich distsouborů. S trochou úsilí by bylo možné zcela přepracovat vzhled Bootstrapu 3, aniž by se dotkli základních souborů. Bootstrap 4 poskytuje známý, ale mírně odlišný přístup.

Nyní je tématika prováděna pomocí proměnných Sass, map Sass a vlastních CSS. Neexistuje žádná další vyhrazená šablona stylů tématu; místo toho můžete povolit vestavěný motiv a přidat přechody, stíny a další.

Sass

Využijte naše zdrojové soubory Sass k využití proměnných, map, mixinů a dalších při kompilaci Sass pomocí vlastního kanálu aktiv.

Struktura souboru

Kdykoli je to možné, vyhněte se úpravám základních souborů Bootstrapu. Pro Sass to znamená vytvořit si vlastní šablonu stylů, která importuje Bootstrap, abyste ji mohli upravovat a rozšiřovat. Za předpokladu, že používáte správce balíčků, jako je npm, budete mít strukturu souborů, která vypadá takto:

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

Pokud jste si stáhli naše zdrojové soubory a nepoužíváte správce balíčků, budete chtít ručně nastavit něco podobného této struktuře a ponechat zdrojové soubory Bootstrapu oddělené od vašich vlastních.

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

Import

Do svého souboru custom.scssimportujete zdrojové soubory Sass Bootstrapu. Máte dvě možnosti: zahrnout celý Bootstrap, nebo si vybrat části, které potřebujete. Doporučujeme to druhé, i když si uvědomte, že mezi našimi komponentami existují určité požadavky a závislosti. Budete také muset zahrnout nějaký JavaScript pro naše pluginy.

// 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čít upravovat kteroukoli z proměnných a map Sass ve vašem custom.scss. Podle potřeby můžete také začít přidávat části Bootstrapu pod // Optionalsekci. bootstrap.scssJako výchozí bod doporučujeme použít celý zásobník importu z našeho souboru.

Výchozí nastavení proměnných

Každá proměnná Sass v Bootstrapu obsahuje !defaultpříznak, který vám umožňuje přepsat výchozí hodnotu proměnné ve vašem vlastním Sass bez úpravy zdrojového kódu Bootstrapu. Podle potřeby zkopírujte a vložte proměnné, upravte jejich hodnoty a odstraňte !defaultpříznak. Pokud již byla proměnná přiřazena, nebude znovu přiřazena podle výchozích hodnot v Bootstrapu.

Kompletní seznam proměnných Bootstrapu najdete v scss/_variables.scss. Některé proměnné jsou nastaveny na null, tyto proměnné nevydávají vlastnost, pokud nejsou ve vaší konfiguraci přepsány.

Přepsání proměnných musí přijít po importu našich funkcí, proměnných a mixinů, ale před zbytkem importů.

Zde je příklad, který mění background-colora colorpro <body>při importu a kompilaci Bootstrap přes 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 podle potřeby pro jakoukoli proměnnou v Bootstrap, včetně globálních možností níže.

Začněte s Bootstrap přes npm s naším startovacím projektem! Přejděte do úložiště šablon twbs/bootstrap-npm-starter , kde se dozvíte, jak vytvořit a přizpůsobit Bootstrap ve svém vlastním projektu npm. Zahrnuje Sass kompilátor, Autoprefixer, Stylelint, PurgeCSS a ikony Bootstrap.

Mapy a smyčky

Bootstrap 4 obsahuje několik map Sass, párů klíčových hodnot, které usnadňují generování rodin souvisejících CSS. Sass mapy používáme pro naše barvy, zarážky mřížky a další. Stejně jako proměnné Sass obsahují všechny mapy Sass !defaultpříznak a lze je přepsat a rozšířit.

Některé z našich map Sass jsou ve výchozím nastavení sloučeny do prázdných. To se provádí proto, aby bylo možné snadno rozšiřovat danou mapu Sass, ale za cenu toho, že odstranění položek z mapy bude o něco obtížnější.

Upravit mapu

Chcete-li upravit stávající barvu na naší $theme-colorsmapě, přidejte do svého vlastního souboru Sass následující:

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

Přidat na mapu

Chcete-li přidat novou barvu do $theme-colors, přidejte nový klíč a hodnotu:

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

Odebrat z mapy

Chcete-li odstranit barvy z $theme-colorsmapy nebo jakékoli jiné mapy, použijte map-remove. Uvědomte si, že jej musíte vložit mezi naše požadavky 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é klíče

Bootstrap předpokládá přítomnost některých specifických klíčů v mapách Sass, jak jsme je používali, a sami je rozšiřujeme. Při přizpůsobování zahrnutých map se můžete setkat s chybami, když se používá konkrétní klíč mapy Sass.

Například pro odkazy, tlačítka a stavy formuláře používáme klávesy primary, , successa z. Nahrazení hodnot těchto klíčů by nemělo představovat žádné problémy, ale jejich odstranění může způsobit problémy s kompilací Sass. V těchto případech budete muset upravit kód Sass, který tyto hodnoty využívá.danger$theme-colors

Funkce

Bootstrap využívá několik funkcí Sass, ale pouze podmnožina je použitelná pro obecné motivy. Zahrnuli jsme tři funkce pro získávání hodnot z barevných map:

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

Ty vám umožňují vybrat jednu barvu z mapy Sass podobně, jako byste použili proměnnou barvy z v3.

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

Máme také další funkci pro získání konkrétní úrovně barvy z $theme-colorsmapy. Záporné hodnoty úrovně zesvětlí barvu, zatímco vyšší úrovně ztmaví.

@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 byste funkci zavolali a předali jí dva parametry: název barvy $theme-colors(např. primární nebo nebezpečná) a číselnou úroveň.

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

V budoucnu by mohly být přidány další funkce nebo váš vlastní Sass, abyste vytvořili funkce úrovní pro další mapy Sass, nebo dokonce obecnou, pokud chcete být podrobnější.

Barevný kontrast

Další funkcí, kterou do Bootstrapu zařazujeme, je funkce barevného kontrastu, color-yiq. Využívá barevný prostor YIQ k automatickému návratu světlé ( #fff) nebo tmavé ( #111) kontrastní barvy na základě zadané základní barvy. Tato funkce je zvláště užitečná pro mixiny nebo smyčky, kde generujete více tříd.

Chcete-li například vygenerovat vzorky barev z naší $theme-colorsmapy:

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

Může být také použit pro jednorázové potřeby kontrastu:

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

Můžete také určit základní barvu pomocí našich funkcí barevné mapy:

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

Únik SVG

Tuto funkci používáme escape-svgk escapování znaků <, >a #pro obrázky na pozadí SVG. Pro správné vykreslení obrázků na pozadí v IE je třeba tyto znaky escapovat. Při použití escape-svgfunkce musí být uvedeny identifikátory URI dat.

Funkce sčítání a odečítání

K zabalení funkce CSS používáme funkce adda . Primárním účelem těchto funkcí je vyhnout se chybám, když je do výrazu předána hodnota „bez jednotky“. Výrazy jako vrátí chybu ve všech prohlížečích, přestože jsou matematicky správné.subtractcalc0calccalc(10px - 0)

Příklad, kdy 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);
}

Příklad, kdy 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

Přizpůsobte si Bootstrap 4 pomocí našeho vestavěného souboru vlastních proměnných a snadno přepínejte globální předvolby CSS pomocí nových $enable-*proměnných Sass. Přepište hodnotu proměnné a npm run testpodle potřeby ji znovu zkompilujte.

Tyto proměnné můžete najít a přizpůsobit pro klíčové globální možnosti v scss/_variables.scsssouboru Bootstrap.

Variabilní	Hodnoty	Popis
`$spacer`	`1rem`(výchozí) nebo jakákoli hodnota > 0	Určuje výchozí hodnotu mezerníku pro programové generování našich obslužných programů mezerníku .
`$enable-rounded`	`true`(výchozí) nebo`false`	Umožňuje předdefinované `border-radius`styly na různých komponentách.
`$enable-shadows`	`true`nebo `false`(výchozí)	Umožňuje předdefinované dekorativní `box-shadow`styly na různých komponentách. Neovlivňuje `box-shadow`s používané pro stavy zaostření.
`$enable-gradients`	`true`nebo `false`(výchozí)	Umožňuje předdefinované přechody prostřednictvím `background-image`stylů na různých komponentách.
`$enable-transitions`	`true`(výchozí) nebo`false`	Umožňuje předdefinované `transition`s na různých součástech.
`$enable-prefers-reduced-motion-media-query`	`true`(výchozí) nebo`false`	Povolí `prefers-reduced-motion`dotaz na média , který potlačí určité animace/přechody na základě preferencí prohlížeče/operačního systému uživatele.
`$enable-hover-media-query`	`true`nebo `false`(výchozí)	Zastaralé
`$enable-grid-classes`	`true`(výchozí) nebo`false`	Umožňuje generování tříd CSS pro systém mřížky (např. `.container`, `.row`, `.col-md-1`atd.).
`$enable-caret`	`true`(výchozí) nebo`false`	Povolí stříšku pseudoprvku na `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(výchozí) nebo`false`	Přidejte kurzor „ruka“ k nezakázaným prvkům tlačítka.
`$enable-print-styles`	`true`(výchozí) nebo`false`	Umožňuje styly pro optimalizaci tisku.
`$enable-responsive-font-sizes`	`true`nebo `false`(výchozí)	Umožňuje responzivní velikosti písma .
`$enable-validation-icons`	`true`(výchozí) nebo`false`	Povoluje `background-image`ikony v textových vstupech a některé vlastní formuláře pro stavy ověření.
`$enable-deprecation-messages`	`true`(výchozí) nebo`false`	Nastavte na , chcete- `false`li skrýt varování při použití některého ze zastaralých mixů a funkcí, jejichž odstranění je plánováno v `v5`.

Barva

Mnoho různých komponent a nástrojů Bootstrapu je vytvořeno pomocí řady barev definovaných v mapě Sass. Tuto mapu lze procházet v Sass a rychle generovat řadu sad pravidel.

Všechny barvy

Všechny barvy dostupné v Bootstrap 4 jsou dostupné jako proměnné Sass a mapa Sass v scss/_variables.scsssouboru. To bude rozšířeno v následujících menších vydáních a přidá se další odstíny, podobně jako paleta stupňů šedi , kterou již zahrnujeme.

$modrá #007bff

$indigo #6610f2

$fialová #6f42c1

$růžová #e83e8c

$red #dc3545

$oranžová #fd7e14

$žlutá #ffc107

$zelená #28a745

$teal #20c997

$ azurová #17a2b8

Zde je návod, jak je můžete použít ve svém Sass:

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

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

Pro nastavení colora background-color.

V budoucnu se budeme snažit poskytovat Sass mapy a proměnné pro odstíny každé barvy, jak jsme to udělali s barvami ve stupních šedi níže.

Barvy motivu

Používáme podmnožinu všech barev k vytvoření menší palety barev pro generování barevných schémat, která je také dostupná jako proměnné Sass a mapa Sass v scss/_variables.scsssouboru Bootstrap.

$primary #007bff

$sekundární #6c757d

$úspěch #28a745

$nebezpečí #dc3545

$varování #ffc107

$info #17a2b8

$světlo #f8f9fa

$tmavý #343a40

Grays

Rozsáhlá sada proměnných šedé a mapa Sass scss/_variables.scsspro konzistentní odstíny šedé ve vašem projektu. Všimněte si, že se jedná o „chladné šedé“, které mají tendenci spíše k jemným modrým tónům než k neutrálním šedým.

$ šedá - 100 #f8f9fa

$ šedá - 200 #e9ecef

$ šedá - 300 #dee2e6

$ šedá - 400 #ced4da

šedá - 500 $ #adb5bd

$ šedá - 600 #6c757d

$ šedá - 700 #495057

$ šedá - 800 #343a40

$ šedá - 900 #212529

V scss/_variables.scss, najdete barevné proměnné Bootstrapu a mapu Sass. Zde je pří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;

Přidejte, odeberte nebo upravte hodnoty v mapě, abyste aktualizovali způsob jejich použití v mnoha dalších komponentách. Bohužel v současné době ne každá součást využívá tuto mapu Sass. Budoucí aktualizace se budou snažit toto zlepšit. Do té doby plánujte využití ${color}proměnných a této mapy Sass.

Komponenty

Mnoho komponent a nástrojů Bootstrapu je vytvořeno pomocí @eachsmyček, které iterují přes mapu Sass. To je zvláště užitečné pro generování variant komponenty podle našeho $theme-colorsnázoru a vytváření responzivních variant pro každý bod přerušení. Když si tyto mapy Sass přizpůsobíte a překompilujete, automaticky uvidíte, že se vaše změny projeví v těchto smyčkách.

Modifikátory

Mnoho komponent Bootstrapu je vytvořeno s přístupem třídy modifikátorů báze. To znamená, že většina stylů je obsažena v základní třídě (např. .btn), zatímco varianty stylu jsou omezeny na třídy modifikátorů (např. .btn-danger). Tyto třídy modifikátorů jsou vytvořeny z $theme-colorsmapy, aby bylo možné přizpůsobit počet a název našich tříd modifikátorů.

Zde jsou dva příklady toho, jak procházíme $theme-colorsmapou, abychom generovali modifikátory .alertkomponenty a všech našich .bg-*obslužných programů 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);
}

Responzivní

Tyto smyčky Sass nejsou omezeny ani na barevné mapy. Můžete také generovat responzivní varianty vašich komponent nebo nástrojů. Vezměte si například naše nástroje pro responzivní zarovnání textu, kde mícháme @eachsmyčku pro $grid-breakpointsmapu Sass s mediálním dotazem.

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

Pokud byste potřebovali upravit svůj $grid-breakpoints, vaše změny se použijí na všechny cykly iterující přes tuto mapu.

CSS proměnné

Bootstrap 4 obsahuje ve svém kompilovaném CSS přibližně dvě desítky vlastních vlastností (proměnných) CSS. Poskytují snadný přístup k běžně používaným hodnotám, jako jsou barvy motivu, zarážky a primární sady písem při práci v Inspektoru vašeho prohlížeče, karanténě kódu nebo obecném prototypování.

Dostupné proměnné

Zde jsou proměnné, které zahrnujeme (všimněte si, že :rootje vyžadováno). Jsou umístěny v naší _root.scsssložce.

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

Příklady

Proměnné CSS nabízejí podobnou flexibilitu jako proměnné Sass, ale bez nutnosti kompilace před doručením do prohlížeče. Například zde obnovujeme písmo a styly odkazů naší stránky pomocí proměnných CSS.

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

Proměnné bodu zlomu

I když jsme původně zahrnuli body přerušení do našich proměnných CSS (např. --breakpoint-md), tyto nejsou podporovány v dotazech na média , ale stále je lze použít v rámci sad pravidel v dotazech na média. Tyto proměnné bodu přerušení zůstávají v kompilovaném CSS kvůli zpětné kompatibilitě, protože je lze využít v JavaScriptu. Více se dozvíte ve spec .

Zde je příklad toho , co není podporováno:

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

A zde je příklad toho, co je podporováno:

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