Bootstrap este un cadru binecunoscut cu componente pre-construite care ajută designerii web să construiască un site, rapid. Noua versiune de Bootstrap 4.2.1 folosește Sass ca preprocesor de alegere. Așadar, în acest blog, vom înțelege cum să suprascriem Bootstrap folosind variabilele sass.

Știm că trebuie să suprascriem stilul Bootstrap pentru a da un nou aspect site-ului. La fel ca și pentru theme-background, fonturi, culori, spațiere, etc. variabilele sunt responsabile de Scss pentru ieșire. Aici trebuie să suprascriem variabilele Bootstrap implicite. Să trecem la suprascrierea Bootstrap.

Adaugați Bootstrap în proiect

În primul rând, descărcați Bootstrap de pe pagina de descărcare Bootstrap. După aceea, vom face un folder sub numele de vendors în folderul scss și vom adăuga Bootstrap în acel folder. Nu vom schimba nimic în fișierele Bootstrap, pentru că se va crea o problemă în viitor, când veți dori să actualizați Bootstrap. După ce ați creat folderul, puteți adăuga bootstrap.scss în acel fișier, pe care l-ați compilat.

În Bootstrap-4, se folosește steagul !default, care descrie valoarea implicită a variabilei implicite. Trebuie doar să copiați acea variabilă, să adăugați valoarea dvs. și să eliminați steagul !default din variabilă.

Override Variables

Bootstrap are propriul “_variables.scss” în folderul “scss”, care conține toate variabilele folosite în Bootstrap. Acum, adăugați dosarul cu numele “abstracts” în dosarul dvs. scss și creați “_custom-variables.scss” în acel dosar.

Acum, deschideți Bootstrap > scss > “_variables.scss”. Aici nu modificăm direct variabilele Bootstrap, așa că vom copia variabilele din “_variables.scss”, și le vom lipi în “_custom-variables.scss”. După ce ați lipit variabilele, puteți adăuga o nouă valoare în variabile.

Trebuie să actualizați culoarea principală a temei (albastru), și să o definiți în fișierul “_custom-variables.scss”. Variabila trebuie să vină înaintea tuturor declarațiilor @import. Când compilați codul Sass, această nouă culoare $primary poate fi folosită pentru tot codul care face referire la variabila $primary.

Modificați punctele de întrerupere implicite

Puncturile de întrerupere ale grilei

Puncturile de întrerupere ale bootstrap sunt, de asemenea, definite în fișierul _variables.scss. Iată care sunt valorile implicite:

Puteți modifica punctele de întrerupere actuale sau adăuga altele noi. Trebuie doar să suprascrieți variabila $grid-breakpoints adăugând doar valorile necesare.

Lățimea containerelor

Lățimile maxime ale containerelor Bootstrap sunt, de asemenea, definite în fișierul _variables.scss. Iată valorile implicite:

Actualizate în “_custom-variables.scss”

Customize The Spacing Rules

Bootstrap oferă un set de spații, care ajută la ajustarea spațiilor. Variabilele $spacer și $spacer gestionează valoarea de bază a spațiilor. Puteți să le actualizați, să adăugați și să le suprascrieți.

Default Variables In Bootstrap

Override Variables

Bootstrap oferă, de asemenea, multe variabile pe care le putem suprascrie, cum ar fi:-
Tabele, Butoane, Formulare, Dropdowns, Navbar, Paginare, Tooltips, Modals, etc…

Utilizați doar ceea ce aveți nevoie

Bootstrap are atât de multe componente pe care le puteți folosi, dar nu trebuie să folosiți toate componentele care sunt furnizate de bootstrap. Aveți control asupra bootstrap, așa că includeți componentele care sunt necesare. Dacă nu le veți include, atunci fișierul CSS va fi mai ușor, cu mai puțin cod. Și puteți include acele componente ori de câte ori veți avea nevoie de ele în viitor. Dacă aveți nevoie să folosiți componentele în viitor, atunci pur și simplu decomentați-le.

Câteva variabile utile

Bootstrap oferă câteva opțiuni globale importante pe care le puteți comuta. Cum ar fi border-radius, box-shadow și gradiente, etc.

Puteți găsi aceste variabile în fișierul scss/_variables.scss.

$enable-caret: Se folosește pentru a activa pseudo-elementul caret pe .dropdown-toggle.
$enable-rounded: Se utilizează pentru a adăuga sau elimina border-radius (implicit: true)
$enable-shadows: Se utilizează pentru a adăuga sau elimina box-shadows (implicit: false)
$enable-gradients: Se utilizează pentru gradienți prin background-image (implicit: false)
$enable-transitions: Se utilizează pentru adăugarea sau eliminarea tranzițiilor (implicit: true)
$enable-grid-classes: Pentru a adăuga sau elimina clase pentru sistemul grid (implicit: true)
$enable-print-styles: Activează stilurile pentru optimizarea imprimării.

Puteți verifica opțiunile sass-opțiuni aici:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options

Concluzie

Ați văzut cât de ușor este să suprascrieți bootstrap -saas folosind variabilele saas. Am încercat să vă oferim un ghid detaliat care să vă ajute în acest proces, cu imagini și funcții pas cu pas. Este foarte ușor să suprascrieți bootstrap, cu condiția să știți cum să găsiți variabilele importante. Și dacă ați parcurs blogul nostru, atunci sunteți gata să suprascrieți!

.