Bootstrap a tema

Personalizza Bootstrap 4 con le nostre nuove variabili Sass integrate per preferenze di stile globali per una facile modifica dei temi e dei componenti.

introduzione

In Bootstrap 3, il tema è stato in gran parte guidato da sostituzioni di variabili in LESS, CSS personalizzato e un foglio di stile del tema separato che abbiamo incluso nei nostri distfile. Con un certo sforzo, è possibile riprogettare completamente l'aspetto di Bootstrap 3 senza toccare i file principali. Bootstrap 4 fornisce un approccio familiare, ma leggermente diverso.

Ora, il tema è realizzato da variabili Sass, mappe Sass e CSS personalizzati. Non ci sono più fogli di stile tematici dedicati; invece, puoi abilitare il tema integrato per aggiungere sfumature, ombre e altro.

Sass

Utilizza i nostri file Sass di origine per sfruttare variabili, mappe, mixin e altro durante la compilazione di Sass utilizzando la tua pipeline di risorse.

Struttura dei file

Quando possibile, evita di modificare i file core di Bootstrap. Per Sass, ciò significa creare il tuo foglio di stile che importi Bootstrap in modo da poterlo modificare ed estendere. Supponendo che tu stia utilizzando un gestore di pacchetti come npm, avrai una struttura di file simile a questa:

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

Se hai scaricato i nostri file sorgente e non stai utilizzando un gestore di pacchetti, ti consigliamo di impostare manualmente qualcosa di simile a quella struttura, mantenendo i file sorgente di Bootstrap separati dai tuoi.

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

Importazione

Nel tuo custom.scss, importerai i file Sass di origine di Bootstrap. Hai due opzioni: includi tutto Bootstrap o scegli le parti di cui hai bisogno. Incoraggiamo quest'ultimo, anche se tieni presente che ci sono alcuni requisiti e dipendenze tra i nostri componenti. Dovrai anche includere alcuni JavaScript per i nostri plugin.

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

Con quella configurazione in atto, puoi iniziare a modificare qualsiasi variabile e mappa Sass nel tuo file custom.scss. Puoi anche iniziare ad aggiungere parti di Bootstrap nella // Optionalsezione secondo necessità. Ti suggeriamo di utilizzare l'intero stack di importazione dal nostro bootstrap.scssfile come punto di partenza.

Default variabili

Ogni variabile Sass in Bootstrap include il !defaultflag che ti consente di sovrascrivere il valore predefinito della variabile nel tuo Sass senza modificare il codice sorgente di Bootstrap. Copia e incolla le variabili secondo necessità, modifica i loro valori e rimuovi il !defaultflag. Se una variabile è già stata assegnata, non verrà riassegnata dai valori predefiniti in Bootstrap.

Troverai l'elenco completo delle variabili di Bootstrap in scss/_variables.scss. Alcune variabili sono impostate su null, queste variabili non generano la proprietà a meno che non vengano sovrascritte nella configurazione.

Le sostituzioni delle variabili devono avvenire dopo l'importazione delle nostre funzioni, variabili e mixin, ma prima del resto delle importazioni.

Ecco un esempio che cambia il background-colore colorper <body>durante l'importazione e la compilazione di Bootstrap tramite 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

Ripetere se necessario per qualsiasi variabile in Bootstrap, comprese le opzioni globali di seguito.

Mappe e loop

Bootstrap 4 include una manciata di mappe Sass, coppie di valori chiave che semplificano la generazione di famiglie di CSS correlati. Usiamo le mappe Sass per i nostri colori, punti di interruzione della griglia e altro ancora. Proprio come le variabili Sass, tutte le mappe Sass includono il !defaultflag e possono essere sovrascritte ed estese.

Alcune delle nostre mappe Sass sono unite in quelle vuote per impostazione predefinita. Questo viene fatto per consentire una facile espansione di una determinata mappa Sass, ma ha il costo di rendere leggermente più difficile la rimozione di oggetti da una mappa.

Modifica mappa

Per modificare un colore esistente nella nostra $theme-colorsmappa, aggiungi quanto segue al tuo file Sass personalizzato:

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

Aggiungi alla mappa

Per aggiungere un nuovo colore a $theme-colors, aggiungi la nuova chiave e valore:

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

Rimuovi dalla mappa

Per rimuovere i colori da $theme-colorso da qualsiasi altra mappa, usa map-remove. Tieni presente che devi inserirlo tra i nostri requisiti e 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";
...

Chiavi richieste

Bootstrap presuppone la presenza di alcune chiavi specifiche all'interno delle mappe Sass poiché le abbiamo utilizzate ed estese noi stessi. Mentre personalizzi le mappe incluse, potresti riscontrare errori in cui viene utilizzata la chiave di una specifica mappa Sass.

Ad esempio, utilizziamo i tasti primary, success, e di per collegamenti, pulsanti e stati dei moduli. La sostituzione dei valori di queste chiavi non dovrebbe presentare problemi, ma la loro rimozione potrebbe causare problemi di compilazione Sass. In questi casi, dovrai modificare il codice Sass che utilizza quei valori.danger$theme-colors

Funzioni

Bootstrap utilizza diverse funzioni Sass, ma solo un sottoinsieme è applicabile ai temi generali. Abbiamo incluso tre funzioni per ottenere valori dalle mappe dei colori:

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

Questi ti consentono di scegliere un colore da una mappa Sass in modo molto simile a come useresti una variabile di colore dalla v3.

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

Abbiamo anche un'altra funzione per ottenere un particolare livello di colore dalla $theme-colorsmappa. I valori di livello negativi schiariranno il colore, mentre i livelli più alti lo scuriranno.

@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, chiamerai la funzione e passerai due parametri: il nome del colore da cui proviene $theme-colors(es. primario o pericoloso) e un livello numerico.

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

Funzioni aggiuntive potrebbero essere aggiunte in futuro o il tuo Sass personalizzato per creare funzioni di livello per mappe Sass aggiuntive, o anche generico se vuoi essere più dettagliato.

Contrasto di colore

Una funzione aggiuntiva che includiamo in Bootstrap è la funzione di contrasto del colore, color-yiq. Utilizza lo spazio colore YIQ per restituire automaticamente un colore di contrasto chiaro ( #fff) o scuro ( #111) in base al colore di base specificato. Questa funzione è particolarmente utile per mixin o loop in cui stai generando più classi.

Ad esempio, per generare campioni di colore dalla nostra $theme-colorsmappa:

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

Può essere utilizzato anche per esigenze di contrasto una tantum:

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

Puoi anche specificare un colore di base con le nostre funzioni di mappatura dei colori:

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

Fuga SVG

Usiamo la escape-svgfunzione per sfuggire ai caratteri <, >e #per le immagini di sfondo SVG. Questi caratteri devono essere sottoposti a escape per eseguire correttamente il rendering delle immagini di sfondo in IE. Quando si utilizza la escape-svgfunzione, gli URI di dati devono essere citati.

Funzioni di somma e sottrazione

Usiamo le funzioni adde subtractper avvolgere la funzione CSS calc. Lo scopo principale di queste funzioni è evitare errori quando un valore "senza unità" 0viene passato a calcun'espressione. Espressioni come calc(10px - 0)restituiranno un errore in tutti i browser, nonostante siano matematicamente corrette.

Esempio in cui il calcolo è valido:

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

Esempio in cui il calcolo non è valido:

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

Opzioni Sass

Personalizza Bootstrap 4 con il nostro file di variabili personalizzate integrato e attiva facilmente le preferenze CSS globali con le nuove $enable-*variabili Sass. Sostituisci il valore di una variabile e ricompila npm run testsecondo necessità.

Puoi trovare e personalizzare queste variabili per le opzioni globali chiave nel scss/_variables.scssfile di Bootstrap.

Colore

Molti dei vari componenti e utilità di Bootstrap sono costruiti attraverso una serie di colori definiti in una mappa Sass. Questa mappa può essere riprodotta in loop in Sass per generare rapidamente una serie di set di regole.

Tutti i colori

Tutti i colori disponibili in Bootstrap 4, sono disponibili come variabili Sass e una mappa Sass nel scss/_variables.scssfile. Questo verrà ampliato nelle successive versioni minori per aggiungere ulteriori sfumature, proprio come la tavolozza della scala di grigi che già includiamo.

Ecco come puoi usarli nel tuo Sass:

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

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

Le classi di utilità del colore sono disponibili anche per l'impostazione colore background-color.

Colori a tema

Usiamo un sottoinsieme di tutti i colori per creare una tavolozza di colori più piccola per la generazione di schemi di colori, disponibili anche come variabili Sass e una mappa Sass nel scss/_variables.scssfile di Bootstrap.

Grigi

Un ampio set di variabili grigie e una mappa Sass scss/_variables.scssper sfumature di grigio coerenti in tutto il tuo progetto. Si noti che questi sono "grigi freddi", che tendono verso un tenue tono blu, piuttosto che grigi neutri.

All'interno scss/_variables.scsstroverai le variabili di colore di Bootstrap e la mappa Sass. Ecco un esempio della $colorsmappa del 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;

Aggiungi, rimuovi o modifica i valori all'interno della mappa per aggiornare il modo in cui vengono utilizzati in molti altri componenti. Sfortunatamente in questo momento, non tutti i componenti utilizzano questa mappa Sass. Gli aggiornamenti futuri si sforzeranno di migliorare questo aspetto. Fino ad allora, pianifica di utilizzare le ${color}variabili e questa mappa Sass.

Componenti

Molti dei componenti e delle utilità di Bootstrap sono costruiti con @eachloop che ripetono su una mappa Sass. Ciò è particolarmente utile per generare varianti di un componente tramite il nostro $theme-colorse creare varianti reattive per ogni punto di interruzione. Man mano che personalizzi queste mappe Sass e le ricompili, vedrai automaticamente le tue modifiche riflesse in questi loop.

Modificatori

Molti dei componenti di Bootstrap sono costruiti con un approccio di classe con modificatore di base. Ciò significa che la maggior parte dello stile è contenuta in una classe base (ad esempio, .btn) mentre le variazioni di stile sono limitate alle classi modificatori (ad esempio, .btn-danger). Queste classi di modificatori sono costruite dalla $theme-colorsmappa per personalizzare il numero e il nome delle nostre classi di modificatori.

Ecco due esempi di come eseguiamo il loop sulla $theme-colorsmappa per generare modificatori per il .alertcomponente e tutte le nostre .bg-*utilità in background.

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

reattivo

Anche questi loop Sass non si limitano alle mappe dei colori. Puoi anche generare variazioni reattive dei tuoi componenti o utilità. Prendi ad esempio le nostre utilità di allineamento del testo reattivo in cui mescoliamo un @eachciclo per la $grid-breakpointsmappa Sass con una query multimediale inclusa.

@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 hai bisogno di modificare il tuo $grid-breakpoints, le tue modifiche si applicheranno a tutti i loop che ripetono su quella mappa.

Variabili CSS

Bootstrap 4 include circa due dozzine di proprietà personalizzate CSS (variabili) nel suo CSS compilato. Questi forniscono un facile accesso ai valori di uso comune come i colori del tema, i punti di interruzione e gli stack di caratteri primari quando si lavora nell'Inspector del browser, in una sandbox del codice o nella prototipazione generale.

Variabili disponibili

Ecco le variabili che includiamo (notare che :rootè obbligatorio). Si trovano nel nostro _root.scssfile.

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

Esempi

Le variabili CSS offrono una flessibilità simile alle variabili di Sass, ma senza la necessità di essere compilate prima di essere servite al browser. Ad esempio, qui stiamo reimpostando il carattere della nostra pagina e gli stili di collegamento con le variabili CSS.

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

Variabili del punto di interruzione

Sebbene originariamente includessimo i punti di interruzione nelle nostre variabili CSS (ad es. --breakpoint-md), questi non sono supportati nelle media query , ma possono comunque essere utilizzati all'interno dei set di regole nelle media query. Queste variabili del punto di interruzione rimangono nel CSS compilato per la compatibilità con le versioni precedenti, dato che possono essere utilizzate da JavaScript. Scopri di più nelle specifiche .

Ecco un esempio di ciò che non è supportato:

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

Ed ecco un esempio di ciò che è supportato:

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