Source

Bootstrap de tematică

Personalizați Bootstrap 4 cu noile noastre variabile Sass încorporate pentru preferințele globale de stil pentru tematică ușoară și modificări ale componentelor.

Introducere

În Bootstrap 3, tematica a fost în mare măsură determinată de înlocuiri variabile în LESS, CSS personalizat și o foaie de stil tematică separată pe care am inclus-o în distfișierele noastre. Cu ceva efort, se poate reproiecta complet aspectul Bootstrap 3 fără a atinge fișierele de bază. Bootstrap 4 oferă o abordare familiară, dar ușor diferită.

Acum, tematica este realizată de variabile Sass, hărți Sass și CSS personalizat. Nu mai există o foaie de stil temă dedicată; în schimb, puteți activa tema încorporată pentru a adăuga degrade, umbre și multe altele.

Sass

Utilizați fișierele noastre sursă Sass pentru a profita de variabile, hărți, mixuri și multe altele.

Structura fișierului

Ori de câte ori este posibil, evitați modificarea fișierelor de bază ale Bootstrap. Pentru Sass, asta înseamnă să creați propria foaie de stil care să importe Bootstrap, astfel încât să o puteți modifica și extinde. Presupunând că utilizați un manager de pachete precum npm, veți avea o structură de fișiere care arată astfel:

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

Dacă ați descărcat fișierele noastre sursă și nu utilizați un manager de pachete, veți dori să configurați manual ceva similar cu acea structură, păstrând fișierele sursă ale Bootstrap separate de ale dvs.

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

Import

În custom.scss, veți importa fișierele sursă Sass ale Bootstrap. Aveți două opțiuni: includeți tot Bootstrap sau alegeți piesele de care aveți nevoie. Îl încurajăm pe acesta din urmă, deși rețineți că există anumite cerințe și dependențe între componentele noastre. De asemenea, va trebui să includeți ceva JavaScript pentru pluginurile noastre.

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

Cu această configurație, puteți începe să modificați oricare dintre variabilele și hărțile Sass din custom.scss. De asemenea, puteți începe să adăugați părți din Bootstrap în // Optionalsecțiune, după cum este necesar. Vă sugerăm să utilizați stiva completă de import din bootstrap.scssfișierul nostru ca punct de plecare.

Valori implicite variabile

Fiecare variabilă Sass din Bootstrap 4 include !defaultindicatorul care vă permite să suprascrieți valoarea implicită a variabilei în propriul dvs. Sass fără a modifica codul sursă al Bootstrap. Copiați și inserați variabile după cum este necesar, modificați-le valorile și eliminați !defaultmarcajul. Dacă o variabilă a fost deja atribuită, atunci nu va fi reatribuită de valorile implicite din Bootstrap.

Veți găsi lista completă a variabilelor Bootstrap în scss/_variables.scss.

Modificarile variabilelor din același fișier Sass pot apărea înainte sau după variabilele implicite. Cu toate acestea, atunci când înlocuiți fișierele Sass, înlocuirile dvs. trebuie să apară înainte de a importa fișierele Sass din Bootstrap.

Iată un exemplu care modifică background-colorși colorpentru <body>când se importă și se compila Bootstrap prin npm:

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

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

Repetați după cum este necesar pentru orice variabilă din Bootstrap, inclusiv opțiunile globale de mai jos.

Hărți și bucle

Bootstrap 4 include o mână de hărți Sass, perechi valori cheie care facilitează generarea de familii de CSS înrudite. Folosim hărți Sass pentru culorile noastre, punctele de întrerupere ale grilei și multe altele. La fel ca variabilele Sass, toate hărțile Sass includ !defaultsteag și pot fi suprascrise și extinse.

Unele dintre hărțile noastre Sass sunt îmbinate în unele goale în mod implicit. Acest lucru se face pentru a permite extinderea ușoară a unei anumite hărți Sass, dar vine cu prețul de a face eliminarea elementelor de pe o hartă puțin mai dificilă.

Modificați harta

Pentru a modifica o culoare existentă în $theme-colorsharta noastră, adăugați următoarele la fișierul personalizat Sass:

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

Adăugați pe hartă

Pentru a adăuga o nouă culoare la $theme-colors, adăugați noua cheie și valoare:

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

Eliminați de pe hartă

Pentru a elimina culorile din $theme-colors, sau din orice altă hartă, utilizați map-remove. Rețineți că trebuie să îl introduceți între cerințele și opțiunile noastre:

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

Cheile necesare

Bootstrap presupune prezența unor chei specifice în hărțile Sass pe măsură ce le folosim și le extindem noi înșine. Pe măsură ce personalizați hărțile incluse, este posibil să întâmpinați erori atunci când este utilizată o anumită cheie a hărții Sass.

De exemplu, folosim tastele primary, success, și de la pentru link-uri, butoane și stări de formular. Înlocuirea valorilor acestor chei nu ar trebui să prezinte probleme, dar eliminarea lor poate cauza probleme de compilare Sass. În aceste cazuri, va trebui să modificați codul Sass care folosește acele valori.danger$theme-colors

Funcții

Bootstrap folosește mai multe funcții Sass, dar doar un subset este aplicabil la tematica generală. Am inclus trei funcții pentru obținerea valorilor din hărțile de culori:

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

Acestea vă permit să alegeți o culoare dintr-o hartă Sass, la fel ca cum ați utiliza o variabilă de culoare din v3.

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

Avem și o altă funcție pentru obținerea unui anumit nivel de culoare de pe $theme-colorshartă. Valorile de nivel negative vor lumina culoarea, în timp ce nivelurile mai înalte se vor întuneca.

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

În practică, ați apela funcția și ați trece doi parametri: numele culorii de la $theme-colors(de exemplu, primar sau pericol) și un nivel numeric.

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

Funcții suplimentare ar putea fi adăugate în viitor sau propriul dvs. Sass personalizat pentru a crea funcții de nivel pentru hărți Sass suplimentare, sau chiar una generică dacă doriți să fiți mai detaliate.

Contrastul culorilor

O funcție suplimentară pe care o includem în Bootstrap este funcția de contrast de culoare, color-yiq. Utilizează spațiul de culoare YIQ pentru a returna automat o culoare de contrast deschisă ( #fff) sau închisă ( #111) pe baza culorii de bază specificate. Această funcție este utilă în special pentru mixuri sau bucle în care generați mai multe clase.

De exemplu, pentru a genera mostre de culoare de pe $theme-colorsharta noastră:

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

Poate fi folosit și pentru nevoi unice de contrast:

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

De asemenea, puteți specifica o culoare de bază cu funcțiile noastre de hartă a culorilor:

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

Opțiuni sass

Personalizați Bootstrap 4 cu fișierul nostru de variabile personalizate încorporat și comutați cu ușurință preferințele CSS globale cu noile $enable-*variabile Sass. Suprascrieți valoarea unei variabile și recompilați cu npm run testdupă cum este necesar.

Puteți găsi și personaliza aceste variabile pentru opțiunile globale cheie în scss/_variables.scssfișierul Bootstrap.

Variabil	Valori	Descriere
`$spacer`	`1rem`(implicit) sau orice valoare > 0	Specifică valoarea implicită de distanțiere pentru a genera în mod programatic utilitățile noastre de distanțiere .
`$enable-rounded`	`true`(implicit) sau`false`	Activează stiluri predefinite `border-radius`pe diferite componente.
`$enable-shadows`	`true`sau `false`(implicit)	Activează stiluri predefinite `box-shadow`pe diferite componente.
`$enable-gradients`	`true`sau `false`(implicit)	Activează gradienți predefiniti prin `background-image`stiluri pe diferite componente.
`$enable-transitions`	`true`(implicit) sau`false`	Activează `transition`s-uri predefinite pe diferite componente.
`$enable-hover-media-query`	`true`sau `false`(implicit)	Depreciat
`$enable-grid-classes`	`true`(implicit) sau`false`	Permite generarea de clase CSS pentru sistemul grid (de ex. `.container`, `.row`, `.col-md-1`, etc.).
`$enable-caret`	`true`(implicit) sau`false`	Activează simbolul pseudo-element pe `.dropdown-toggle`.
`$enable-print-styles`	`true`(implicit) sau`false`	Activează stiluri pentru optimizarea tipăririi.

Culoare

Multe dintre diferitele componente și utilități Bootstrap sunt construite printr-o serie de culori definite într-o hartă Sass. Această hartă poate fi reluată în Sass pentru a genera rapid o serie de reguli.

Toate culorile

Toate culorile disponibile în Bootstrap 4 sunt disponibile ca variabile Sass și o hartă Sass în scss/_variables.scssfișier. Acest lucru va fi extins în versiunile minore ulterioare pentru a adăuga nuanțe suplimentare, la fel ca paleta în tonuri de gri pe care o includem deja.

Albastru

Indigo

Violet

Roz

roșu

Portocale

Galben

Verde

Teal

Cyan

Iată cum le puteți folosi în Sass:

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

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

Clasele de utilitate de culoare sunt, de asemenea, disponibile pentru setare colorși background-color.

În viitor, vom urmări să oferim hărți și variabile Sass pentru nuanțe ale fiecărei culori, așa cum am procedat cu culorile în tonuri de gri de mai jos.

Culori tematice

Folosim un subset de toate culorile pentru a crea o paletă de culori mai mică pentru generarea de scheme de culori, disponibilă și ca variabile Sass și o hartă Sass în scss/_variables.scssfișierul Bootstraps.

Primar

Secundar

Succes

Pericol

Avertizare

Info

Ușoară

Întuneric

Cenuşii

Un set extins de variabile gri și o hartă Sass scss/_variables.scsspentru nuanțe consistente de gri în proiectul dvs.

100

200

300

400

500

600

700

800

900

În scss/_variables.scss, veți găsi variabilele de culoare ale Bootstrap și harta Sass. Iată un exemplu de $colorshartă 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;

Adăugați, eliminați sau modificați valori în cadrul hărții pentru a actualiza modul în care sunt utilizate în multe alte componente. Din păcate, în acest moment, nu toate componentele utilizează această hartă Sass. Actualizările viitoare se vor strădui să îmbunătățească acest lucru. Până atunci, plănuiți să utilizați ${color}variabilele și această hartă Sass.

Componente

Multe dintre componentele și utilitățile Bootstrap sunt construite cu @eachbucle care iterează peste o hartă Sass. Acest lucru este util în special pentru a genera variante ale unei componente de către noi $theme-colorsși pentru a crea variante receptive pentru fiecare punct de întrerupere. Pe măsură ce personalizați aceste hărți Sass și recompilați, veți vedea automat modificările reflectate în aceste bucle.

Modificatori

Multe dintre componentele lui Bootstrap sunt construite cu o abordare a clasei modificatoare de bază. Aceasta înseamnă că cea mai mare parte a stilului este conținută într-o clasă de bază (de exemplu, .btn), în timp ce variațiile de stil sunt limitate la clasele modificatoare (de exemplu, .btn-danger). Aceste clase modificatoare sunt construite din $theme-colorshartă pentru a personaliza numărul și numele claselor noastre modificatoare.

Iată două exemple de modul în care trecem peste $theme-colorshartă pentru a genera modificatori pentru .alertcomponentă și pentru toate .bg-*utilitățile noastre de fundal.

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

Receptiv

Aceste bucle Sass nu se limitează nici la hărți de culori. De asemenea, puteți genera variații receptive ale componentelor sau utilităților dvs. Luați, de exemplu, utilitarele noastre de aliniere a textului receptiv, în care amestecăm o @eachbuclă pentru $grid-breakpointsharta Sass cu o interogare media.

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

Dacă trebuie să modificați $grid-breakpoints, modificările dvs. se vor aplica tuturor buclelor care iterează pe harta respectivă.

variabile CSS

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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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

Deși inițial am inclus puncte de întrerupere în variabilele noastre CSS (de exemplu, --breakpoint-md), acestea nu sunt acceptate în interogările media , dar pot fi utilizate în continuare în seturile de reguli în interogările media. Aceste variabile punct de întrerupere rămân în CSS compilat pentru compatibilitate inversă, având în vedere că pot fi utilizate de JavaScript. Aflați mai multe în specificații.

Iată un exemplu de ceea ce nu este acceptat:

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

Și iată un exemplu de ceea ce este susținut:

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