Personalizzazione CSS di Bootstrap 4

it | ja

Variabili Sass

Le variabili Sass del codice sorgente Bootstrap sono definite in _variables.scss con opzione !default. Puoi cambiare o modificare queste variabili per personalizzare gli stili di Bootstrap.

Parametri di base

Le variabili qui sotto sono parametri di base per le impostazioni di tutto lo stile.

• $font-size-base : Dimensione base dei caratteri (predefinita: 1rem), influenza tutte le dimensioni dei caratteri degli stili Bootstrap
• $spacer : Lunghezza dell’unità per le utilità di spaziatura (predefinita: 1rem)

// Use 10% smaller fonts$font-size-base: 0.9rem;// import Bootstrap@import "bootstrap/scss/bootstrap";

Modifica dei preset di personalizzazione

Le variabili che iniziano con $enable- sono preset di personalizzazione integrati (vedere le opzioni Sass per la lista completa). Per esempio, i gradienti e le ombre sono disabilitati di default (nella versione 4.1.1). Puoi abilitare queste opzioni con un codice di estensione come segue.

// initialize customization variables$enable-gradients: true;$enable-shadows: true;// import Bootstrap@import "bootstrap/scss/bootstrap";...

Vedi Effetti di sfumatura e ombre per controllare le differenze delle rappresentazioni visive.

Modificare le variabili della mappa

Sass supporta vari tipi di variabili (vedi Tipi di dati). La maggior parte delle variabili sono scalari (numeri, stringhe, colori, booleani e null). Ma le variabili di seguito sono definite come mappe chiave-valore.

• $grays : Preset in scala di grigi
• $colors : Colori di base (blu, indaco, viola, …)
• $theme-colors : Colori del tema Bootstrap (primario, secondario, successo, …)
• $spacers : Valori preimpostati di Spacing utitilies
• $sizes : Valori preimpostati di Sizing utitilies
• $grid-breakpoints : Grid breakpoint (viewport width) preset
• $container-max-widths : Grid container width per ogni breakpoints

Tu puoi anche modificare queste variabili. Aggiungere e cambiare i valori è facile.

// Example: Modify $theme-colors$theme-colors: ( // change "success" from green to teal "success": #20c997, // add "custom" to orange "custom": #fd7e14);// import Bootstrap@import "bootstrap/scss/bootstrap";

Di seguito sono esempi di avvisi dal vivo (confrontare con i colori predefiniti di Bootstrap ⇒ vedere gli esempi del documento ufficiale).

Puoi anche rimuovere le voci della mappa esistenti usando le funzioni Sass builtin (cerca map-remove($map, $keys...) di map-functions). Ma devi importare i parziali invidualmente. Vedere Remove from map del documento ufficiale per i dettagli.