Bootstrap de tematització

Personalitzeu Bootstrap 4 amb les nostres noves variables integrades de Sass per a les preferències d'estil globals per facilitar la temàtica i els canvis de components.

Introducció

A Bootstrap 3, la temàtica es va impulsar en gran mesura per substitucions variables a LESS, CSS personalitzat i un full d'estil de tema independent que vam incloure als nostres distfitxers. Amb cert esforç, es podria redissenyar completament l'aspecte de Bootstrap 3 sense tocar els fitxers bàsics. Bootstrap 4 ofereix un enfocament familiar, però lleugerament diferent.

Ara, la tematització s'aconsegueix mitjançant variables Sass, mapes Sass i CSS personalitzats. No hi ha més full d'estil de tema dedicat; en canvi, podeu habilitar el tema integrat per afegir degradats, ombres i molt més.

Sass

Utilitzeu els nostres fitxers Sass d'origen per aprofitar variables, mapes, mixins i molt més quan compileu Sass amb el vostre propi pipeline d'actius.

Estructura del fitxer

Sempre que sigui possible, eviteu modificar els fitxers bàsics de Bootstrap. Per a Sass, això significa crear el vostre propi full d'estil que importi Bootstrap perquè pugueu modificar-lo i ampliar-lo. Suposant que utilitzeu un gestor de paquets com npm, tindreu una estructura de fitxers com aquesta:

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

Si heu baixat els nostres fitxers font i no feu servir un gestor de paquets, voldreu configurar manualment alguna cosa semblant a aquesta estructura, mantenint els fitxers font de Bootstrap separats dels vostres.

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

Importació

Al vostre custom.scss, importareu els fitxers Sass d'origen de Bootstrap. Teniu dues opcions: incloure tot Bootstrap o triar les peces que necessiteu. Us animem a aquest últim, encara que tingueu en compte que hi ha alguns requisits i dependències entre els nostres components. També haureu d'incloure una mica de JavaScript per als nostres connectors.

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

Amb aquesta configuració al seu lloc, podeu començar a modificar qualsevol de les variables i mapes de Sass al vostre custom.scss. També podeu començar a afegir parts de Bootstrap a la // Optionalsecció segons sigui necessari. Us suggerim que utilitzeu la pila d'importació completa del nostre bootstrap.scssfitxer com a punt de partida.

Valors per defecte de la variable

Cada variable de Sass a Bootstrap inclou la !defaultmarca que us permet anul·lar el valor predeterminat de la variable al vostre propi Sass sense modificar el codi font de Bootstrap. Copieu i enganxeu variables segons sigui necessari, modifiqueu-ne els valors i elimineu la !defaultmarca. Si ja s'ha assignat una variable, no es tornarà a assignar amb els valors predeterminats a Bootstrap.

Trobareu la llista completa de les variables de Bootstrap a scss/_variables.scss. Algunes variables s'estableixen a null, aquestes variables no donen sortida a la propietat tret que s'invalidin a la vostra configuració.

Les substitucions de variables han de venir després d'importar les nostres funcions, variables i mixins, però abans de la resta de les importacions.

Aquí teniu un exemple que canvia el background-colori colorper al <body>quan s'importa i es compila Bootstrap mitjançant 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

Repetiu segons sigui necessari per a qualsevol variable a Bootstrap, incloses les opcions globals següents.

Mapes i bucles

Bootstrap 4 inclou un grapat de mapes Sass, parells de valors clau que faciliten la generació de famílies de CSS relacionats. Utilitzem mapes Sass per als nostres colors, punts d'interrupció de la quadrícula i molt més. Igual que les variables Sass, tots els mapes Sass inclouen la !defaultbandera i es poden anul·lar i ampliar.

Alguns dels nostres mapes Sass es fusionen en altres buits de manera predeterminada. Això es fa per permetre una fàcil expansió d'un mapa Sass determinat, però té el preu de fer que l'eliminació d'elements d'un mapa sigui una mica més difícil.

Modificar el mapa

Per modificar un color existent al nostre $theme-colorsmapa, afegiu el següent al vostre fitxer Sass personalitzat:

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

Afegeix al mapa

Per afegir un color nou a $theme-colors, afegiu la clau i el valor nous:

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

Eliminar del mapa

Per eliminar colors de $theme-colors, o de qualsevol altre mapa, utilitzeu map-remove. Tingueu en compte que l'heu d'inserir entre els nostres requisits i opcions:

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

Claus requerides

Bootstrap assumeix la presència d'algunes claus específiques dins dels mapes de Sass tal com les hem utilitzat i les estem nosaltres mateixos. A mesura que personalitzeu els mapes inclosos, és possible que trobeu errors quan s'utilitzi la clau d'un mapa Sass específic.

Per exemple, fem servir les tecles primary, success, i de per als enllaços, els botons i els estats de formulari. La substitució dels valors d'aquestes claus no hauria de presentar cap problema, però eliminar-les pot provocar problemes de compilació de Sass. En aquests casos, haureu de modificar el codi Sass que fa ús d'aquests valors.danger$theme-colors

Funcions

Bootstrap utilitza diverses funcions de Sass, però només un subconjunt és aplicable a la temàtica general. Hem inclòs tres funcions per obtenir valors dels mapes de colors:

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

Aquests us permeten escollir un color d'un mapa Sass de la mateixa manera que utilitzaríeu una variable de color de la v3.

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

També tenim una altra funció per obtenir un nivell particular de color del $theme-colorsmapa. Els valors de nivell negatius il·luminaran el color, mentre que els nivells més alts s'enfosquiran.

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

A la pràctica, cridaríeu a la funció i passareu dos paràmetres: el nom del color de $theme-colors(p. ex., primari o perill) i un nivell numèric.

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

Es podrien afegir funcions addicionals en el futur o el vostre propi Sass personalitzat per crear funcions de nivell per a mapes Sass addicionals, o fins i tot una genèrica si voleu ser més detallat.

Contrast de color

Una funció addicional que incloem a Bootstrap és la funció de contrast de color, color-yiq. Utilitza l' espai de color YIQ per tornar automàticament un color de contrast clar ( #fff) o fosc ( #111) en funció del color base especificat. Aquesta funció és especialment útil per a mixins o bucles on esteu generant diverses classes.

Per exemple, per generar mostres de color a partir del nostre $theme-colorsmapa:

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

També es pot utilitzar per a necessitats puntuals de contrast:

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

També podeu especificar un color base amb les nostres funcions de mapa de colors:

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

Escape SVG

Utilitzem la escape-svgfunció per escapar dels caràcters <, >i #per a les imatges de fons SVG. Cal escapar aquests caràcters per representar correctament les imatges de fons a IE. Quan s'utilitza la escape-svgfunció, els URI de dades s'han de citar.

Funcions de suma i resta

Utilitzem les funcions addi subtractper embolicar la calcfunció CSS. 0L'objectiu principal d'aquestes funcions és evitar errors quan es passa un valor "sense unitat" a una calcexpressió. Expressions com calc(10px - 0)retornaran un error a tots els navegadors, tot i ser matemàticament correctes.

Exemple on el calc és vàlid:

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

Exemple on el càlcul no és vàlid:

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

Opcions Sass

Personalitzeu Bootstrap 4 amb el nostre fitxer de variables personalitzades integrat i canvieu fàcilment les preferències CSS globals amb les noves $enable-*variables de Sass. Substituïu el valor d'una variable i recompileu- npm run testlo segons sigui necessari.

Podeu trobar i personalitzar aquestes variables per a les opcions globals clau al scss/_variables.scssfitxer de Bootstrap.

Color

Molts dels diferents components i utilitats de Bootstrap es construeixen mitjançant una sèrie de colors definits en un mapa Sass. Aquest mapa es pot reproduir a Sass per generar ràpidament una sèrie de regles.

Tots els colors

Tots els colors disponibles a Bootstrap 4 estan disponibles com a variables Sass i un mapa Sass al scss/_variables.scssfitxer. Això s'ampliarà en versions menors posteriors per afegir matisos addicionals, com la paleta d'escala de grisos que ja incloem.

A continuació s'explica com podeu utilitzar-los al vostre Sass:

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

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

Les classes d'utilitat de color també estan disponibles per configurar colori background-color.

Colors temàtics

Utilitzem un subconjunt de tots els colors per crear una paleta de colors més petita per generar esquemes de colors, també disponible com a variables Sass i un mapa Sass al scss/_variables.scssfitxer de Bootstrap.

Grises

Un ampli conjunt de variables de gris i un mapa Sass scss/_variables.scssper a tons de gris coherents al vostre projecte. Tingueu en compte que aquests són "gris frescos", que tendeixen a un to blau subtil, en lloc de grisos neutres.

Dins scss/_variables.scssde , trobareu les variables de color de Bootstrap i el mapa Sass. Aquí teniu un exemple del $colorsmapa 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;

Afegiu, elimineu o modifiqueu valors dins del mapa per actualitzar com s'utilitzen en molts altres components. Malauradament, en aquest moment, no tots els components utilitzen aquest mapa Sass. Les futures actualitzacions s'esforçaran per millorar-ho. Fins aleshores, planifiqueu fer ús de les ${color}variables i d'aquest mapa Sass.

Components

Molts dels components i utilitats de Bootstrap es construeixen amb @eachbucles que iteren sobre un mapa Sass. Això és especialment útil per generar variants d'un component pel nostre $theme-colorsi crear variants sensibles per a cada punt d'interrupció. A mesura que personalitzeu aquests mapes Sass i recompileu, veureu automàticament els vostres canvis reflectits en aquests bucles.

Modificadors

Molts dels components de Bootstrap es construeixen amb un enfocament de classe de modificador de base. Això significa que la major part de l'estil està continguda a una classe base (p. ex., .btn) mentre que les variacions d'estil es limiten a classes modificadores (p. ex., .btn-danger). Aquestes classes modificadores es construeixen a partir del $theme-colorsmapa per personalitzar el nombre i el nom de les nostres classes modificadores.

Aquí hi ha dos exemples de com fem un bucle sobre el $theme-colorsmapa per generar modificadors al .alertcomponent i a totes les nostres .bg-*utilitats de fons.

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

Responent

Aquests bucles Sass tampoc es limiten als mapes de colors. També podeu generar variacions sensibles dels vostres components o utilitats. Prengui per exemple les nostres utilitats d'alineació de text sensibles on barregem un @eachbucle per al $grid-breakpointsmapa Sass amb una consulta multimèdia inclosa.

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

Si necessiteu modificar el vostre $grid-breakpoints, els vostres canvis s'aplicaran a tots els bucles que iterin sobre aquest mapa.

Variables CSS

Bootstrap 4 inclou unes dues dotzenes de propietats personalitzades (variables) CSS al seu CSS compilat. Aquests ofereixen un accés fàcil als valors d'ús habitual, com ara els nostres colors del tema, els punts d'interrupció i les piles de tipus de lletra principals quan treballeu a l'Inspector del vostre navegador, a una caixa de proves de codi o a la creació de prototips generals.

Variables disponibles

Aquí teniu les variables que incloem (tingueu en compte que :rootés obligatori). Es troben al nostre _root.scssfitxer.

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

Exemples

Les variables CSS ofereixen una flexibilitat similar a les variables de Sass, però sense necessitat de compilar-les abans de ser enviades al navegador. Per exemple, aquí estem restablint el tipus de lletra i els estils d'enllaç de la nostra pàgina amb variables CSS.

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

Variables de punt d'interrupció

Tot i que originalment vam incloure punts d'interrupció a les nostres variables CSS (p. ex., --breakpoint-md), aquests no s'admeten a les consultes multimèdia , però encara es poden utilitzar dins de conjunts de regles a les consultes multimèdia. Aquestes variables de punt d'interrupció romanen al CSS compilat per compatibilitat amb les versions anteriors, ja que poden ser utilitzades per JavaScript. Més informació a l'especificació .

Aquí teniu un exemple del que no s'admet:

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

I aquí teniu un exemple del que s'admet:

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