Source

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.

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

@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čí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 Bootstrap 4 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.

Přepsání proměnných ve stejném souboru Sass může být před nebo za výchozími proměnnými. Při přepisování napříč soubory Sass však musí k přepsání dojít před importem souborů Sass Bootstrapu.

Zde je příklad, který mění background-colora colorpro <body>při importu a kompilaci Bootstrap přes npm:

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

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

Opakujte podle potřeby pro jakoukoli proměnnou v Bootstrap, včetně globálních možností níže.

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:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

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`
}

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 našem _variables.scsssouboru.

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é `box-shadow`styly na různých komponentách.
`$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-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-print-styles`	`true`(výchozí) nebo`false`	Umožňuje styly pro optimalizaci tisku.

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 našem 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ý

Indigo

Nachový

Růžový

Červené

oranžový

Žlutá

Zelená

Teal

Tyrkysová

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 našem scss/_variables.scsssouboru.

Hlavní

Sekundární

Úspěch

Nebezpečí

Varování

Info

Světlo

Temný

Grays

Rozsáhlá sada proměnných šedé a mapa Sass scss/_variables.scsspro konzistentní odstíny šedé ve vašem projektu.

100

200

300

400

500

600

700

800

900

V rámci _variables.scss, najdete naše barevné proměnné 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 přibližně dvě desítky vlastních vlastností (proměnných) CSS ve svém kompilovaném 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
}

Ve svých mediálních dotazech můžete také použít naše proměnné bodu přerušení:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}