Theming Bootstrap

Personalizà Bootstrap 4 cù e nostre novi variabili Sass integrate per e preferenze di stili glubale per temi facili è cambiamenti di cumpunenti.

Introduzione

In Bootstrap 3, a tematica hè stata largamente guidata da overrides variabili in LESS, CSS persunalizati, è un fogliu di stile di tema separatu chì avemu inclusu in i nostri distschedari. Cù qualchì sforzu, unu puderia riprogettà cumplettamente l'aspettu di Bootstrap 3 senza toccu i schedarii core. Bootstrap 4 furnisce un approcciu familiar, ma un pocu sfarente.

Avà, a tematica hè realizata da variabili Sass, carte Sass è CSS persunalizati. Ùn ci hè più un fogliu di stile di tema dedicatu; invece, pudete attivà u tema integratu per aghjunghje gradienti, ombre, è più.

Sass

Aduprate i nostri fugliali Sass fonte per prufittà di variabili, carte, mixin, è più.

Struttura di u schedariu

Sempre chì hè pussibule, evite micca di mudificà i schedarii core di Bootstrap. Per Sass, questu significa creà u vostru propiu fogliu di stile chì importa Bootstrap per pudè mudificà è allargà. Assumindu chì avete aduprà un gestore di pacchetti cum'è npm, avarete una struttura di schedari chì pare cusì:

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

Se avete scaricatu i nostri fugliali fonte è ùn avete micca aduprà un gestore di pacchetti, vi vulete cunfigurà manualmente qualcosa di simile à quella struttura, mantenendu i schedarii fonte di Bootstrap separati da i vostri.

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

Importazione

In u vostru custom.scss, impurtate i schedarii Sass fonte di Bootstrap. Avete duie opzioni: include tuttu Bootstrap, o sceglite e parti chì avete bisognu. Incuragemu l'ultime, ancu s'ellu sia cuscenti chì ci sò alcuni requisiti è dipendenze in i nostri cumpunenti. Avete ancu bisognu di include JavaScript per i nostri plugins.

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

Cù sta cunfigurazione in u locu, pudete inizià à mudificà qualsiasi variabili è carte Sass in u vostru custom.scss. Pudete ancu principià à aghjunghje parti di Bootstrap sottu a // Optionalsezione cum'è necessariu. Suggeremu di utilizà a pila d'importazione cumpleta da u nostru bootstrap.scssschedariu cum'è u vostru puntu di partenza.

Predefiniti variabili

Ogni variabile Sass in Bootstrap 4 include a !defaultbandiera chì vi permette di annullà u valore predeterminatu di a variabile in u vostru propiu Sass senza mudificà u codice fonte di Bootstrap. Copia è incollà e variàbili cum'è necessariu, mudificà i so valori, è sguassate a !defaultbandiera. Se una variabile hè digià stata assignata, allora ùn serà micca riassignata da i valori predeterminati in Bootstrap.

Truverete a lista completa di e variàbili di Bootstrap in scss/_variables.scss.

L'annullamenti di variabili in u stessu schedariu Sass ponu esse prima o dopu à e variabili predeterminate. Tuttavia, quandu si annullanu i schedari Sass, i vostri overrides devenu esse prima di impurtà i schedari Sass di Bootstrap.

Eccu un esempiu chì cambia u background-colorè colorper <body>quandu importa è compilate Bootstrap via npm:

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

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

Repetite quantu necessariu per qualsiasi variabile in Bootstrap, cumprese l'opzioni glubale sottu.

Mapi è loops

Bootstrap 4 include una manciata di carte Sass, coppie di valori chjave chì facenu più faciule per generà famiglie di CSS rilativi. Utilizemu carte Sass per i nostri culori, punti di rottura di griglia, è più. Cum'è e variabili Sass, tutte e carte Sass includenu a !defaultbandiera è ponu esse rimpiazzate è allargate.

Alcune di e nostre carte Sass sò unificate in quelli vacanti per difettu. Questu hè fattu per permette l'espansione faciule di una carta Sass data, ma vene à u costu di fà caccià l' articuli da una mappa un pocu più difficiule.

Mudificà a mappa

Per mudificà un culore esistente in a nostra $theme-colorsmappa, aghjunghje i seguenti à u vostru schedariu Sass persunalizatu:

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

Aghjunghjite à a mappa

Per aghjunghje un novu culore à $theme-colors, aghjunghje a nova chjave è u valore:

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

Eliminate da a mappa

Per sguassà i culori da $theme-colors, o qualsiasi altra mappa, utilizate map-remove. Siate cuscenti chì duvete inserisce trà e nostre esigenze è opzioni:

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

Chjavi richiesti

Bootstrap assume a presenza di alcune chjavi specifiche in e carte Sass cum'è avemu usatu è estendemu sti stessi. Cumu persunalizà e carte incluse, pudete scuntrà errori induve una chjave specifica di a mappa Sass hè stata aduprata.

Per esempiu, usemu i primary, successè i dangerchjavi da $theme-colorsper i ligami, i buttoni è i stati di forma. A rimpiazzà i valori di sti chjavi ùn deve esse micca prublemi, ma sguassate pò causà prublemi di compilazione Sass. In questi casi, avete bisognu di mudificà u codice Sass chì face usu di quelli valori.

Funzioni

Bootstrap utilizeghja parechje funzioni di Sass, ma solu un subset hè applicabile à a tematica generale. Avemu inclusu trè funzioni per ottene valori da e carte di culore:

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

Quessi permettenu di sceglie un culore da una mappa Sass cum'è cumu avete aduprà una variabile di culore da v3.

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

Avemu ancu una altra funzione per ottene un livellu particulari di culore da a $theme-colorsmappa. I valori di u nivellu negativu illuminaranu u culore, mentre chì i livelli più alti scuriranu.

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

In pratica, chjamà a funzione è passà in dui paràmetri: u nome di u culore da $theme-colors(per esempiu, primariu o periculu) è un livellu numericu.

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

Funzioni supplementari puderanu esse aghjuntu in u futuru o u vostru propiu Sass persunalizatu per creà funzioni di livellu per mappe Sass supplementari, o ancu un genericu si vulete esse più verbose.

Cuntrastu di culore

Una funzione supplementaria chì includemu in Bootstrap hè a funzione di cuntrastu di culore, color-yiq. Utilizeghja u spaziu di culore YIQ per rinvià automaticamente un culore di cuntrastu chjaru ( #fff) o scuru ( #111) basatu annantu à u culore di basa specificatu. Questa funzione hè particularmente utile per mixin o loops induve generate parechje classi.

Per esempiu, per generà campioni di culore da a nostra $theme-colorsmappa:

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

Pò esse ancu usatu per esigenze di cuntrastu una volta:

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

Pudete ancu specificà un culore di basa cù e nostre funzioni di mappa di culore:

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

Opzioni Sass

Personalizà Bootstrap 4 cù u nostru schedariu di variabili persunalizati integrati è cambia facilmente e preferenze CSS globale cù novi $enable-*variabili Sass. Override u valore di una variabile è ricumpila cù npm run testquantu necessariu.

Pudete truvà è persunalizà queste variabili per l'opzioni globale chjave in u scss/_variables.scssschedariu Bootstrap.

Variabile	I valori	Descrizzione
`$spacer`	`1rem`(par défaut), ou toute valeur > 0	Specifica u valore di spaziatore predeterminatu per generà programmaticamente e nostre utilità di spaziatore .
`$enable-rounded`	`true`(default) o`false`	Permette `border-radius`stili predefiniti nantu à diversi cumpunenti.
`$enable-shadows`	`true`o `false`(default)	Permette `box-shadow`stili predefiniti nantu à diversi cumpunenti.
`$enable-gradients`	`true`o `false`(default)	Permette gradienti predefiniti via `background-image`stili nantu à diversi cumpunenti.
`$enable-transitions`	`true`(default) o`false`	Permette `transition`s predefiniti nantu à diversi cumpunenti.
`$enable-hover-media-query`	`true`o `false`(default)	Deprecated
`$enable-grid-classes`	`true`(default) o`false`	Permette a generazione di classi CSS per u sistema di griglia (per esempiu, `.container`, `.row`, `.col-md-1`, etc.).
`$enable-caret`	`true`(default) o`false`	Abilita u pseudo elementu caret in `.dropdown-toggle`.
`$enable-print-styles`	`true`(default) o`false`	Permette stili per ottimisà a stampa.

Culore

Parechji di i vari cumpunenti è utilità di Bootstrap sò custruiti attraversu una seria di culori definiti in una mappa Sass. Questa mappa pò esse ripresa in Sass per generà rapidamente una seria di regule.

Tutti i culori

Tutti i culori dispunibuli in Bootstrap 4, sò dispunibuli cum'è variabili Sass è una mappa Sass in scss/_variables.scssu schedariu. Questu serà allargatu in versioni minori successive per aghjunghje sfumature supplementari, cum'è a paleta in scala di grigi chì avemu digià include.

Turchinu

Indigo

Purpura

Rosa

Rossu

Aranciu

Ghjallu

Verde

Teal

Cianu

Eccu cumu pudete aduprà questi in u vostru Sass:

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

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

E classi di utilità di culore sò ancu dispunibili per l'impostazione colorè background-color.

In u futuru, avemu da scopu di furnisce Sass maps è variabili per sfumature di ogni culore cum'è avemu fattu cù i culori in scala di grisgiu sottu.

Culori tematichi

Utilizemu un subset di tutti i culori per creà una paleta di culori più chjuca per generà schemi di culori, ancu dispunibili cum'è variabili Sass è una mappa Sass in u scss/_variables.scssschedariu di Bootstraps.

Primariu

Sicundariu

Successu

Periculu

Attenzione

Info

Luce

Scuru

Grigi

Un inseme espansiu di variabili grigi è una mappa Sass in scss/_variables.scssper sfumature coherenti di grisgiu in u vostru prughjettu.

100

200

300

400

500

600

700

800

900

Dentru scss/_variables.scss, truverete e variabili di culore di Bootstrap è a mappa Sass. Eccu un esempiu di a $colorsmappa 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;

Aghjunghjite, sguassate o mudificà i valori in a mappa per aghjurnà cumu sò usati in parechji altri cumpunenti. Sfortunatamente à questu tempu, micca tutti i cumpunenti utilizanu sta mappa Sass. L'aghjurnamenti futuri s'impegnanu à migliurà questu. Finu à tandu, pensa à aduprà e ${color}variàbili è sta mappa Sass.

Cumpunenti

Parechji di i cumpunenti è l'utilità di Bootstrap sò custruiti cù @eachloops chì iteranu nantu à una mappa Sass. Questu hè particularmente utile per generà varianti di un cumpunente da u nostru $theme-colorsè per creà varianti responsive per ogni breakpoint. Cumu persunalizà queste carte Sass è ricumpilate, vi vede automaticamente i vostri cambiamenti riflessi in questi loops.

Modificatori

Parechji di i cumpunenti di Bootstrap sò custruiti cù un approcciu di classi di basa di modificatori. Questu significa chì a maiò parte di u stilu hè cuntenutu à una classa di basa (per esempiu, .btn) mentre chì e variazioni di stile sò limitate à e classi di modificatori (per esempiu, .btn-danger). Queste classi modificatori sò custruiti da a $theme-colorsmappa per fà persunalizà u numeru è u nome di e nostre classi modificatori.

Eccu dui esempii di cumu circhemu nantu à a $theme-colorsmappa per generà modificatori à u .alertcumpunente è tutte e nostre .bg-*utilità di fondo.

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

Risposta

Questi loops Sass ùn sò micca limitati à e carte di culore. Pudete ancu generà variazioni responsive di i vostri cumpunenti o utilità. Pigliate per esempiu e nostre utilità di allineamentu di testu rispunsevuli induve mischjemu un @eachciclu per a $grid-breakpointsmappa Sass cù una 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; }
  }
}

Se avete bisognu di mudificà u vostru $grid-breakpoints, i vostri cambiamenti s'applicanu à tutti i loops chì iteranu nantu à quella mappa.

Variabili CSS

Bootstrap 4 include circa duie decine di proprietà persunalizate CSS (variabili) in u so CSS compilatu. Quessi furniscenu un accessu faciule à i valori cumunimenti utilizati cum'è i nostri culori di tema, punti di rottura è pile di fonti primarie quandu travagliate in l'ispettore di u vostru navigatore, un codice sandbox o prototipu generale.

Variabili dispunibuli

Eccu i variàbili chì includemu (nota chì :roothè necessariu). Sò situati in u nostru _root.scssschedariu.

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

Esempii

Variabili CSS offrenu una flessibilità simile à e variàbili di Sass, ma senza bisognu di compilazione prima di esse servutu à u navigatore. Per esempiu, quì avemu resettatu u fonti di a nostra pagina è i stili di ligame cù variabili CSS.

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

Variabili di breakpoint

Mentre avemu urigginariamente inclusi punti di rottura in e nostre variabili CSS (per esempiu, --breakpoint-md), questi ùn sò micca supportati in e dumande di media , ma ponu ancu esse aduprati in e regule in e dumande di media. Queste variabili di breakpoint restanu in u CSS compilatu per a cumpatibilità inversa postu chì ponu esse utilizati da JavaScript. Sapete più in a spec.

Eccu un esempiu di ciò chì ùn hè micca supportatu:

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

È quì hè un esempiu di ciò chì hè supportatu:

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