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 dist
schedari. 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 di fonte per prufittà di variabili, carte, mixin, è di più quandu compilate Sass utilizendu u vostru propiu pipeline di asset.
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 utilizatu un gestore di pacchetti, vi vulete cunfigurà manualmente qualcosa simili à 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
// 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";
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 // Optional
sezione cum'è necessariu. Suggeremu di utilizà a pila d'importazione cumpleta da u nostru bootstrap.scss
schedariu cum'è u vostru puntu di partenza.
Predefiniti variabili
Ogni variabile Sass in Bootstrap include a !default
bandiera 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 !default
bandiera. 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
. Alcune variabili sò imposte à null
, sti variàbili ùn emettenu micca a pruprietà, salvu ch'elli sò rimpiazzati in a vostra cunfigurazione.
L'override di variabile deve vene dopu chì e nostre funzioni, variàbili è mixins sò impurtati, ma prima di u restu di l'impurtazioni.
Eccu un esempiu chì cambia u background-color
è color
per <body>
quandu importa è compilate Bootstrap via 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
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 !default
bandiera è 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-colors
mappa, 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 danger
chjavi da $theme-colors
per 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 uttene un livellu particulari di culore da a $theme-colors
mappa. 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-colors
mappa:
@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`
}
Scappa SVG
Utilizemu a escape-svg
funzione per scappà da i caratteri <
, >
è #
per l'imagine di fondo SVG. Questi caratteri anu da esse scappatu per rende bè l'imaghjini di fondo in IE. Quandu si usa a escape-svg
funzione, l'URI di dati deve esse citati.
Funzioni aghjunghje è sottrae
Utilizemu add
e subtract
funzioni per imbulighjà a funzione CSS calc
. U scopu primariu di queste funzioni hè di evità l'errori quandu un valore "senza unità" 0
hè passatu in una calc
espressione. Espressioni cum'è calc(10px - 0)
vultà un errore in tutti i navigatori, malgradu esse matematicamente curretti.
Esempiu induve u calc hè validu:
$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);
}
Esempiu induve u calc hè invalidu:
$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
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 test
quantu necessariu.
Pudete truvà è persunalizà queste variabili per l'opzioni globale chjave in u scss/_variables.scss
schedariu 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) ofalse |
Permette border-radius stili predefiniti nantu à diversi cumpunenti. |
$enable-shadows |
true o false (default) |
Permette box-shadow stili decorativi predefiniti nantu à diversi cumpunenti. Ùn affetta micca l' box-shadow usu di i stati di focus. |
$enable-gradients |
true o false (default) |
Permette gradienti predefiniti via background-image stili nantu à diversi cumpunenti. |
$enable-transitions |
true (default) ofalse |
Permette transition s predefiniti nantu à diversi cumpunenti. |
$enable-prefers-reduced-motion-media-query |
true (default) ofalse |
Abilita l'interrogazione prefers-reduced-motion media , chì supprime certe animazioni / transizioni basate nantu à e preferenze di u navigatore / sistema operatore di l'utilizatori. |
$enable-hover-media-query |
true o false (default) |
Deprecated |
$enable-grid-classes |
true (default) ofalse |
Permette a generazione di classi CSS per u sistema di griglia (per esempiu, .container , .row , .col-md-1 , etc.). |
$enable-caret |
true (default) ofalse |
Abilita u pseudo elementu caret in .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (default) ofalse |
Aghjunghjite u cursore "manu" à l'elementi di buttone micca disabilitatu. |
$enable-print-styles |
true (default) ofalse |
Permette stili per ottimisà a stampa. |
$enable-responsive-font-sizes |
true o false (default) |
Permette e dimensioni di font responsive . |
$enable-validation-icons |
true (default) ofalse |
Permette background-image l'icone in input testuali è alcune forme persunalizate per i stati di validazione. |
$enable-deprecation-messages |
true (default) ofalse |
Impostate false per ammuccià l'avvertimenti quandu utilizate qualsiasi di i mixin è funzioni obsoleti chì sò previsti per esse eliminati in v5 . |
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.scss
u schedariu. Questu serà allargatu in versioni minori successive per aghjunghje sfumature supplementari, cum'è a paleta in scala di grigi chì avemu digià include.
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
.
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.scss
schedariu Bootstrap.
Grigi
Un inseme espansiu di variabili grigi è una mappa Sass in scss/_variables.scss
per sfumature coherenti di grisgiu in u vostru prughjettu. Nota chì questi sò "grigi freschi", chì tendenu versu un tonu blu sottile, invece di grisgi neutri.
Dentru scss/_variables.scss
, truverete e variabili di culore di Bootstrap è a mappa Sass. Eccu un esempiu di a $colors
mappa 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ù @each
loops 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-colors
mappa per fà persunalizà u numeru è u nome di e nostre classi modificatori.
Eccu dui esempii di cumu circhemu nantu à a $theme-colors
mappa per generà modificatori à u .alert
cumpunente è 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 @each
ciclu per a $grid-breakpoints
mappa 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ì :root
hè necessariu). Sò situati in u nostru _root.scss
schedariu.
: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;
}
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);
}
}