Source

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 ancora.

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

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

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 4 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.

Le sostituzioni di variabili all'interno dello stesso file Sass possono venire prima o dopo le variabili predefinite. Tuttavia, quando si esegue l'override su file Sass, le sostituzioni devono avvenire prima dell'importazione dei file Sass di Bootstrap.

Ecco un esempio che cambia il background-colore colorper <body>durante l'importazione e la compilazione di Bootstrap tramite npm:

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

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

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, utilizzare map-remove:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

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`
}

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 nostro _variables.scssfile.

Variabile	I valori	Descrizione
`$spacer`	`1rem`(predefinito) o qualsiasi valore > 0	Specifica il valore di spaziatore predefinito per generare a livello di codice le nostre utilità spaziatore .
`$enable-rounded`	`true`(predefinito) o`false`	`border-radius`Abilita stili predefiniti su vari componenti.
`$enable-shadows`	`true`o `false`(predefinito)	`box-shadow`Abilita stili predefiniti su vari componenti.
`$enable-gradients`	`true`o `false`(predefinito)	Abilita gradienti predefiniti tramite `background-image`stili su vari componenti.
`$enable-transitions`	`true`(predefinito) o`false`	Abilita messaggi predefiniti `transition`su vari componenti.
`$enable-hover-media-query`	`true`o `false`(predefinito)	Deprecato
`$enable-grid-classes`	`true`(predefinito) o`false`	Abilita la generazione di classi CSS per il sistema a griglia (es. `.container`, `.row`, `.col-md-1`, ecc.).
`$enable-caret`	`true`(predefinito) o`false`	Abilita lo pseudo elemento accento circonflesso su `.dropdown-toggle`.
`$enable-print-styles`	`true`(predefinito) o`false`	Abilita gli stili per ottimizzare la stampa.

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 mappa Sass nel nostro 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.

Blu

Indaco

Viola

Rosa

Rosso

Arancia

Giallo

Verde

Alzavola

Ciano

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.

In futuro, mireremo a fornire mappe e variabili Sass per le sfumature di ciascun colore, come abbiamo fatto con i colori in scala di grigi di seguito.

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 nostro scss/_variables.scssfile.

Primario

Secondario

Successo

Pericolo

Avvertimento

Informazioni

Luce

Scuro

Grigi

Un ampio set di variabili grigie e una mappa Sass scss/_variables.scssper sfumature di grigio coerenti in tutto il tuo progetto.

100

200

300

400

500

600

700

800

900

All'interno _variables.scsstroverai le nostre variabili colore 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 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
}

Puoi anche utilizzare le nostre variabili breakpoint nelle tue media query:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}