Bootstrap de tematică
Personalizați Bootstrap 4 cu noile noastre variabile Sass încorporate pentru preferințele globale de stil pentru tematică ușoară și modificări ale componentelor.
Introducere
În Bootstrap 3, tematica a fost în mare măsură determinată de înlocuiri variabile în LESS, CSS personalizat și o foaie de stil tematică separată pe care am inclus-o în dist
fișierele noastre. Cu ceva efort, se poate reproiecta complet aspectul Bootstrap 3 fără a atinge fișierele de bază. Bootstrap 4 oferă o abordare familiară, dar ușor diferită.
Acum, tematica este realizată de variabile Sass, hărți Sass și CSS personalizat. Nu mai există o foaie de stil temă dedicată; în schimb, puteți activa tema încorporată pentru a adăuga degrade, umbre și multe altele.
Sass
Utilizați fișierele noastre sursă Sass pentru a profita de variabile, hărți, mixuri și multe altele. În versiunea noastră, am mărit precizia de rotunjire Sass la 6 (în mod implicit este 5) pentru a preveni problemele legate de rotunjirea browserului.
Structura fișierului
Ori de câte ori este posibil, evitați modificarea fișierelor de bază ale Bootstrap. Pentru Sass, asta înseamnă să creați propria foaie de stil care să importe Bootstrap, astfel încât să o puteți modifica și extinde. Presupunând că utilizați un manager de pachete precum npm, veți avea o structură de fișiere care arată astfel:
Dacă ați descărcat fișierele noastre sursă și nu utilizați un manager de pachete, veți dori să configurați manual ceva similar cu acea structură, păstrând fișierele sursă ale Bootstrap separate de ale dvs.
Import
În custom.scss
, veți importa fișierele sursă Sass ale Bootstrap. Aveți două opțiuni: includeți tot Bootstrap sau alegeți piesele de care aveți nevoie. Îl încurajăm pe acesta din urmă, deși rețineți că există anumite cerințe și dependențe între componentele noastre. De asemenea, va trebui să includeți ceva JavaScript pentru pluginurile noastre.
Cu această configurație, puteți începe să modificați oricare dintre variabilele și hărțile Sass din custom.scss
. De asemenea, puteți începe să adăugați părți din Bootstrap în // Optional
secțiune, după cum este necesar. Vă sugerăm să utilizați stiva completă de import din bootstrap.scss
fișierul nostru ca punct de plecare.
Valori implicite variabile
Fiecare variabilă Sass din Bootstrap 4 include !default
indicatorul care vă permite să suprascrieți valoarea implicită a variabilei în propriul dvs. Sass fără a modifica codul sursă al Bootstrap. Copiați și inserați variabile după cum este necesar, modificați-le valorile și eliminați !default
marcajul. Dacă o variabilă a fost deja atribuită, atunci nu va fi reatribuită de valorile implicite din Bootstrap.
Veți găsi lista completă a variabilelor Bootstrap în scss/_variables.scss
. Unele variabile sunt setate la null
, aceste variabile nu scot proprietatea decât dacă sunt suprascrise în configurația dvs.
Modificarile variabilelor din același fișier Sass pot apărea înainte sau după variabilele implicite. Cu toate acestea, atunci când înlocuiți fișierele Sass, înlocuirile dvs. trebuie să apară înainte de a importa fișierele Sass din Bootstrap.
Iată un exemplu care modifică background-color
și color
pentru <body>
când se importă și se compila Bootstrap prin npm:
Repetați după cum este necesar pentru orice variabilă din Bootstrap, inclusiv opțiunile globale de mai jos.
Hărți și bucle
Bootstrap 4 include o mână de hărți Sass, perechi valori cheie care facilitează generarea de familii de CSS înrudite. Folosim hărți Sass pentru culorile noastre, punctele de întrerupere ale grilei și multe altele. La fel ca variabilele Sass, toate hărțile Sass includ !default
steag și pot fi suprascrise și extinse.
Unele dintre hărțile noastre Sass sunt îmbinate în unele goale în mod implicit. Acest lucru se face pentru a permite extinderea ușoară a unei anumite hărți Sass, dar vine cu prețul de a face eliminarea elementelor de pe o hartă puțin mai dificilă.
Modificați harta
Pentru a modifica o culoare existentă în $theme-colors
harta noastră, adăugați următoarele la fișierul personalizat Sass:
Adăugați pe hartă
Pentru a adăuga o nouă culoare la $theme-colors
, adăugați noua cheie și valoare:
Eliminați de pe hartă
Pentru a elimina culorile din $theme-colors
, sau din orice altă hartă, utilizați map-remove
. Rețineți că trebuie să îl introduceți între cerințele și opțiunile noastre:
Cheile necesare
Bootstrap presupune prezența unor chei specifice în hărțile Sass pe măsură ce le folosim și le extindem noi înșine. Pe măsură ce personalizați hărțile incluse, este posibil să întâmpinați erori atunci când este utilizată o anumită cheie a hărții Sass.
De exemplu, folosim tastele primary
, success
, și de la pentru link-uri, butoane și stări de formular. Înlocuirea valorilor acestor chei nu ar trebui să prezinte probleme, dar eliminarea lor poate cauza probleme de compilare Sass. În aceste cazuri, va trebui să modificați codul Sass care folosește acele valori.danger
$theme-colors
Funcții
Bootstrap folosește mai multe funcții Sass, dar doar un subset este aplicabil la tematica generală. Am inclus trei funcții pentru obținerea valorilor din hărțile de culori:
Acestea vă permit să alegeți o culoare dintr-o hartă Sass, la fel ca cum ați utiliza o variabilă de culoare din v3.
Avem și o altă funcție pentru obținerea unui anumit nivel de culoare de pe $theme-colors
hartă. Valorile de nivel negative vor lumina culoarea, în timp ce nivelurile mai înalte se vor întuneca.
În practică, ați apela funcția și ați trece doi parametri: numele culorii de la $theme-colors
(de exemplu, primar sau pericol) și un nivel numeric.
Funcții suplimentare ar putea fi adăugate în viitor sau propriul dvs. Sass personalizat pentru a crea funcții de nivel pentru hărți Sass suplimentare, sau chiar una generică dacă doriți să fiți mai detaliate.
Contrastul culorilor
O funcție suplimentară pe care o includem în Bootstrap este funcția de contrast de culoare, color-yiq
. Utilizează spațiul de culoare YIQ pentru a returna automat o culoare de contrast deschisă ( #fff
) sau închisă ( #111
) pe baza culorii de bază specificate. Această funcție este utilă în special pentru mixuri sau bucle în care generați mai multe clase.
De exemplu, pentru a genera mostre de culoare de pe $theme-colors
harta noastră:
Poate fi folosit și pentru nevoi unice de contrast:
De asemenea, puteți specifica o culoare de bază cu funcțiile noastre de hartă a culorilor:
Evadare SVG
Folosim escape-svg
funcția pentru a evada caracterele <
, >
și #
pentru imaginile de fundal SVG. Aceste caractere trebuie să fie eliminate pentru a reda corect imaginile de fundal în IE. Când utilizați escape-svg
funcția, URI-urile de date trebuie citate.
Funcții de adunare și scădere
Folosim funcțiile add
și subtract
pentru a încheia calc
funcția CSS. Scopul principal al acestor funcții este de a evita erorile atunci când o 0
valoare „fără unitate” este transmisă într-o calc
expresie. Expresii precum calc(10px - 0)
vor returna o eroare în toate browserele, în ciuda faptului că sunt corecte din punct de vedere matematic.
Exemplu în care calculul este valid:
Exemplu în care calculul nu este valid:
Opțiuni sass
Personalizați Bootstrap 4 cu fișierul nostru de variabile personalizate încorporat și comutați cu ușurință preferințele CSS globale cu noile $enable-*
variabile Sass. Suprascrieți valoarea unei variabile și recompilați cu npm run test
după cum este necesar.
Puteți găsi și personaliza aceste variabile pentru opțiunile globale cheie în scss/_variables.scss
fișierul Bootstrap.
Variabil | Valori | Descriere |
---|---|---|
$spacer |
1rem (implicit) sau orice valoare > 0 |
Specifică valoarea implicită de distanțiere pentru a genera în mod programatic utilitățile noastre de distanțiere . |
$enable-rounded |
true (implicit) saufalse |
Activează stiluri predefinite border-radius pe diferite componente. |
$enable-shadows |
true sau false (implicit) |
Activează stiluri predefinite box-shadow pe diferite componente. |
$enable-gradients |
true sau false (implicit) |
Activează gradienți predefiniti prin background-image stiluri pe diferite componente. |
$enable-transitions |
true (implicit) saufalse |
Activează transition s-uri predefinite pe diferite componente. |
$enable-prefers-reduced-motion-media-query |
true (implicit) saufalse |
Activează prefers-reduced-motion interogarea media , care suprimă anumite animații/tranziții bazate pe preferințele browserului/sistemului de operare ale utilizatorilor. |
$enable-hover-media-query |
true sau false (implicit) |
Depreciat |
$enable-grid-classes |
true (implicit) saufalse |
Permite generarea de clase CSS pentru sistemul grid (de ex. .container , .row , .col-md-1 , etc.). |
$enable-caret |
true (implicit) saufalse |
Activează simbolul pseudo-element pe .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (implicit) saufalse |
Adăugați cursorul „mână” elementelor butoanelor nedezactivate. |
$enable-print-styles |
true (implicit) saufalse |
Activează stiluri pentru optimizarea tipăririi. |
$enable-responsive-font-sizes |
true sau false (implicit) |
Activează dimensiunile de font receptive . |
$enable-validation-icons |
true (implicit) saufalse |
Activează background-image pictogramele în intrările de text și unele formulare personalizate pentru stările de validare. |
$enable-deprecation-messages |
true sau false (implicit) |
Setați la true pentru a afișa avertismente atunci când utilizați oricare dintre mixurile și funcțiile depreciate care sunt planificate să fie eliminate în v5 . |
Culoare
Multe dintre diferitele componente și utilități Bootstrap sunt construite printr-o serie de culori definite într-o hartă Sass. Această hartă poate fi reluată în Sass pentru a genera rapid o serie de reguli.
Toate culorile
Toate culorile disponibile în Bootstrap 4 sunt disponibile ca variabile Sass și o hartă Sass în scss/_variables.scss
fișier. Acest lucru va fi extins în versiunile minore ulterioare pentru a adăuga nuanțe suplimentare, la fel ca paleta în tonuri de gri pe care o includem deja.
Iată cum le puteți folosi în Sass:
Clasele de utilitate de culoare sunt, de asemenea, disponibile pentru setare color
și background-color
.
În viitor, vom urmări să oferim hărți și variabile Sass pentru nuanțe ale fiecărei culori, așa cum am procedat cu culorile în tonuri de gri de mai jos.
Culori tematice
Folosim un subset de toate culorile pentru a crea o paletă de culori mai mică pentru a genera scheme de culori, disponibilă și ca variabile Sass și o hartă Sass în scss/_variables.scss
fișierul Bootstrap.
Cenușii
Un set extins de variabile gri și o hartă Sass scss/_variables.scss
pentru nuanțe consistente de gri în proiectul dvs. Rețineți că acestea sunt „gri reci”, care tind spre un ton subtil de albastru, mai degrabă decât gri neutre.
În scss/_variables.scss
, veți găsi variabilele de culoare ale Bootstrap și harta Sass. Iată un exemplu de $colors
hartă Sass:
Adăugați, eliminați sau modificați valori în cadrul hărții pentru a actualiza modul în care sunt utilizate în multe alte componente. Din păcate, în acest moment, nu toate componentele utilizează această hartă Sass. Actualizările viitoare se vor strădui să îmbunătățească acest lucru. Până atunci, plănuiți să utilizați ${color}
variabilele și această hartă Sass.
Componente
Multe dintre componentele și utilitățile Bootstrap sunt construite cu @each
bucle care iterează peste o hartă Sass. Acest lucru este util în special pentru a genera variante ale unei componente de către noi $theme-colors
și pentru a crea variante receptive pentru fiecare punct de întrerupere. Pe măsură ce personalizați aceste hărți Sass și recompilați, veți vedea automat modificările reflectate în aceste bucle.
Modificatori
Multe dintre componentele lui Bootstrap sunt construite cu o abordare a clasei modificatoare de bază. Aceasta înseamnă că cea mai mare parte a stilului este conținută într-o clasă de bază (de exemplu, .btn
), în timp ce variațiile de stil sunt limitate la clasele modificatoare (de exemplu, .btn-danger
). Aceste clase modificatoare sunt construite din $theme-colors
hartă pentru a personaliza numărul și numele claselor noastre modificatoare.
Iată două exemple de modul în care trecem peste $theme-colors
hartă pentru a genera modificatori pentru .alert
componentă și pentru toate .bg-*
utilitățile noastre de fundal.
Receptiv
Aceste bucle Sass nu se limitează nici la hărți de culori. De asemenea, puteți genera variații receptive ale componentelor sau utilităților dvs. Luați, de exemplu, utilitarele noastre de aliniere a textului receptiv, în care amestecăm o @each
buclă pentru $grid-breakpoints
harta Sass cu o interogare media.
Dacă trebuie să modificați $grid-breakpoints
, modificările dvs. se vor aplica tuturor buclelor care iterează pe harta respectivă.
variabile CSS
Bootstrap 4 include aproximativ două duzini de proprietăți personalizate (variabile) CSS în CSS-ul său compilat. Acestea oferă acces ușor la valorile utilizate în mod obișnuit, cum ar fi culorile temei, punctele de întrerupere și stivele de fonturi principale atunci când lucrați în Inspectorul browserului dvs., un cod sandbox sau prototipuri generale.
Variabile disponibile
Iată variabilele pe care le includem (rețineți că :root
este necesar). Sunt localizate în _root.scss
dosarul nostru.
Exemple
Variabilele CSS oferă o flexibilitate similară cu variabilele lui Sass, dar fără a fi nevoie de compilare înainte de a fi transmise browserului. De exemplu, aici resetăm fontul și stilurile de link ale paginii noastre cu variabile CSS.
Variabilele punctului de întrerupere
Deși inițial am inclus puncte de întrerupere în variabilele noastre CSS (de exemplu, --breakpoint-md
), acestea nu sunt acceptate în interogările media , dar pot fi utilizate în continuare în seturile de reguli în interogările media. Aceste variabile punct de întrerupere rămân în CSS compilat pentru compatibilitate cu versiunea inversă, având în vedere că pot fi utilizate de JavaScript. Aflați mai multe în specificații .
Iată un exemplu de ceea ce nu este acceptat:
Și iată un exemplu de ceea ce este susținut: