Personalizare CSS Bootstrap 4

en | ja

Variabile Sass

Variabilele Sass din codul sursă Bootstrap sunt definite în _variables.scss cu opțiunea !default. Puteți schimba sau modifica aceste variabile pentru a personaliza stilurile Bootstrap.

Parametri de bază

Variabilele de mai jos sunt parametrii de bază pentru toate setările de stil.

• $font-size-base : Dimensiunea fontului de bază (implicit: 1rem), afectează toate dimensiunile fontului din stilurile Bootstrap
• $spacer : Lungimea unitară pentru utilitățile de spațiere (implicit: 1rem)

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

Modificarea presetărilor de personalizare

Variabilele care încep cu $enable- sunt presetări de personalizare încorporate (consultați opțiunile Sass pentru lista completă). De exemplu, gradienții și umbrele sunt dezactivate în mod implicit (la versiunea 4.1.1). Puteți activa aceste opțiuni cu un cod de extensie ca mai jos.

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

Vezi Gradații și efecte de umbră pentru a verifica diferențele dintre reprezentările vizuale.

Modificarea variabilelor de hartă

Sass suportă diferite tipuri de variabile (vezi Tipuri de date). Majoritatea variabilelor sunt scalare (numere, șiruri de caractere, culori, booleane și null). Dar variabilele de mai jos sunt definite ca hărți cheie-valoare.

• : Presetări pentru scara de gri
• $colors : Culori de bază (albastru, indigo, violet, …)
• $theme-colors : Culorile temei Bootstrap (primar, secundar, succes, …)
• $spacers : Valori prestabilite ale utitilităților de spațiere
• $sizes : Valori prestabilite ale utitilităților de dimensionare
• $grid-breakpoints : Presetări ale punctelor de întrerupere a grilei (lățimea viewportului)
• $container-max-widths : Lățimea containerului de grilă pentru fiecare punct de întrerupere

De asemenea, puteți modifica aceste variabile. Adăugarea și modificarea valorilor sunt ușoare.

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

Acestea sunt mostre de alerte live (comparați cu culorile implicite Bootstrap ⇒ vezi exemplele din documentul oficial).

Puteți, de asemenea, să eliminați intrările existente din hartă folosind funcțiile integrate Sass (căutați map-remove($map, $keys...) din map-functions). Dar trebuie să importați partiturile în mod individual. Consultați Remove from map din documentul oficial pentru detalii.