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

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ú 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ť.

Funkcie sčítania a odčítania

We use the add and subtract functions to wrap the CSS calc function. The primary purpose of these functions is to avoid errors when a “unitless” 0 value is passed into a calc expression. Expressions like calc(10px - 0) will return an error in all browsers, despite being mathematically correct.

Example where the calc is valid:

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

Example where the calc is invalid:

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

Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* Sass variables. Override a variable’s value and recompile with npm run test as needed.

You can find and customize these variables for key global options in Bootstrap’s scss/_variables.scss file.

Variable	Values	Description
`$spacer`	`1rem` (default), or any value > 0	Specifies the default spacer value to programmatically generate our spacer utilities.
`$enable-rounded`	`true` (default) or `false`	Enables predefined `border-radius` styles on various components.
`$enable-shadows`	`true` or `false` (default)	Enables predefined `box-shadow` styles on various components.
`$enable-gradients`	`true` or `false` (default)	Enables predefined gradients via `background-image` styles on various components.
`$enable-transitions`	`true` (default) or `false`	Enables predefined `transition`s on various components.
`$enable-prefers-reduced-motion-media-query`	`true` (default) or `false`	Enables the `prefers-reduced-motion` media query, which suppresses certain animations/transitions based on the users’ browser/operating system preferences.
`$enable-hover-media-query`	`true` or `false` (default)	Deprecated
`$enable-grid-classes`	`true` (default) or `false`	Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.).
`$enable-caret`	`true` (default) or `false`	Enables pseudo element caret on `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true` (default) or `false`	Add “hand” cursor to non-disabled button elements.
`$enable-print-styles`	`true` (default) or `false`	Enables styles for optimizing printing.
`$enable-responsive-font-sizes`	`true` or `false` (default)	Enables responsive font sizes.
`$enable-validation-icons`	`true` (default) or `false`	Enables `background-image` icons within textual inputs and some custom forms for validation states.
`$enable-deprecation-messages`	`true` or `false` (default)	Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`.

Color

Many of Bootstrap’s various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets.

All colors

All colors available in Bootstrap 4, are available as Sass variables and a Sass map in scss/_variables.scss file. This will be expanded upon in subsequent minor releases to add additional shades, much like the grayscale palette we already include.

Blue

Indigo

Purple

Pink

Red

Orange

Yellow

Green

Teal

Cyan

Here’s how you can use these in your Sass:

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

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

Color utility classes are also available for setting color and background-color.

In the future, we’ll aim to provide Sass maps and variables for shades of each color as we’ve done with the grayscale colors below.

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/_variables.scss file.

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Grays

An expansive set of gray variables and a Sass map in scss/_variables.scss for consistent shades of gray across your project. Note that these are “cool grays”, which tend towards a subtle blue tone, rather than neutral grays.

100

200

300

400

500

600

700

800

900

Within scss/_variables.scss, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the $colors Sass map:

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

Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not every component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the ${color} variables and this Sass map.

Components

Many of Bootstrap’s components and utilities are built with @each loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our $theme-colors and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.

Modifiers

Many of Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., .btn) while style variations are confined to modifier classes (e.g., .btn-danger). These modifier classes are built from the $theme-colors map to make customizing the number and name of our modifier classes.

Here are two examples of how we loop over the $theme-colors map to generate modifiers to the .alert component and all our .bg-* background utilities.

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

Responsive

These Sass loops aren’t limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an @each loop for the $grid-breakpoints Sass map with a media query include.

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

Should you need to modify your $grid-breakpoints, your changes will apply to all the loops iterating over that map.

CSS variables

Bootstrap 4 includes around two dozen CSS custom properties (variables) in its compiled CSS. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s Inspector, a code sandbox, or general prototyping.

Available variables

Here are the variables we include (note that the :root is required). They’re located in our _root.scss file.

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

Examples

CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our page’s font and link styles with CSS variables.

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

Breakpoint variables

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