Bootstrap er et velkendt framework med præfabrikerede komponenter, der hjælper webdesignere med at bygge et websted hurtigt. Den nye version af Bootstrap 4.2.1 bruger Sass som den foretrukne præprocessor. Så i denne blog vil vi forstå, hvordan vi kan tilsidesætte Bootstrap ved hjælp af sass-variabler.

Vi ved, at vi skal tilsidesætte Bootstrap-stilen for at give et nyt udseende til webstedet. Ligesom for tema-baggrund, skrifttyper, farver, afstand osv. er variabler ansvarlige for Scss for output. Her er vi nødt til at tilsidesætte standard Bootstrap-variabler. Lad os gå videre til overriding af Bootstrap.

Add Bootstrap In The Project

Først af alt skal du downloade bootstrap fra Bootstrap download-siden. Derefter vil vi lave en mappe under navnet vendors i scss-mappen og tilføje Bootstrap i denne mappe. Vi vil ikke ændre noget i Bootstrap-filerne, fordi det vil skabe et problem i fremtiden, når du ønsker at opdatere Bootstrap. Når du har oprettet mappen, kan du tilføje bootstrap.scss i den fil, som du har kompileret.

I Bootstrap-4 bruger de !default-flaget, som beskriver standardvariablens standard. Du skal blot kopiere den pågældende variabel, tilføje din værdi og fjerne !default-flaget fra variablen.

Override Variables

Bootstrap har sin egen “_variables.scss” i mappen “scss”, som indeholder alle variabler, der bruges i Bootstrap. Tilføj nu mappen med navnet “abstracts” i din scss-mappe, og opret “_custom-variables.scss” i den mappe.

Åbn nu Bootstrap > scss > “_variables.scss”. Vi ændrer ikke Bootstrap-variabler direkte her, så vi kopierer variabler fra “_variables.scss”, og indsætter dem i “_custom-variables.scss”. Når du har indsat variablerne, kan du tilføje ny værdi i variabler.

Du skal opdatere den primære temafarve (blå), og definere den i din “_custom-variables.scss”-fil. Variablen skal komme før alle @import-erklæringer. Når du kompilerer Sass-koden, kan denne nye $primary-farve bruges til al kode, der refererer til $primary-variablen.

Modificer standardbrydepunkterne

Grid-brydepunkter

Bootstrap-brydepunkterne er også defineret i filen _variables.scss. Her er standardværdierne:

Du kan ændre de aktuelle breakpoints eller tilføje nye. Du skal blot tilsidesætte variablen $grid-breakpoints og kun tilføje de nødvendige værdier.

Containers Width

Bootstrap container-max-widths er også defineret i _variables.scss-filen. Her er standardværdierne:

Opdateret i “_custom-variables.scss”

Anpas afstandsreglerne

Bootstrap indeholder et sæt afstandsregler, som hjælper med at justere afstanden. Variablerne $spacer og $spacer administrerer basisværdien af afstandene. Du kan opdatere, tilføje og tilsidesætte dem.

Standardvariabler i Bootstrap

Override Variabler

Bootstrap giver også mange variabler, som vi kan overskrive som f.eks:
Tabeller, Knapper, Formularer, Dropdowns, Navbar, Pagination, Tooltips, Modals osv…

Brug kun hvad du har brug for

Bootstrap har så mange komponenter, som du kan bruge, men du behøver ikke at bruge alle de komponenter, der leveres af bootstrap. Du har kontrol over bootstrap, så medtag de komponenter, der er nødvendige. Hvis du ikke vil inkludere dem, så vil CSS-filen blive lettere med mindre kode. Og du kan inkludere disse komponenter, når du har brug for dem i fremtiden. Hvis du har brug for at bruge komponenterne i fremtiden, skal du blot afkommentere dem.

Nyttige variabler

Bootstrap indeholder nogle vigtige globale indstillinger, som du kan slå om på. Som border-radius, box-shadow og gradienter osv.

Du kan finde disse variabler i scss/_variables.scss-filen.

$enable-caret: Bruges til at aktivere pseudo-elementet caret på .dropdown-toggle.
$enable-rounded: Brug til at tilføje eller fjerne border-radius (standard: true)
$enable-shadows:
$enable-shadows: Brug til at tilføje eller fjerne boksskygger (standard: false)
$enable-gradients: Brug til at tilføje eller fjerne boksskygger (standard: false): Brug til gradienter via background-image (standard: false)
$enable-transitions: Brug til gradienter via background-image (standard: false)
$enable-transitions: Brug til gradienter via background-image (standard: false): Anvendes til tilføjelse eller fjernelse af overgange (standard: true)
$enable-grid-classes: Til at tilføje eller fjerne klasser til gitter-systemet (standard: true)
$enable-print-styles: Bruges til at tilføje eller fjerne klasser til gitter-systemet (standard: true)
$enable-print-styles: Aktiverer stilarter til optimering af udskrivning.

Du kan tjekke sass-optioner her:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options

Konklusion

Du har set, hvor nemt det er at tilsidesætte bootstrap -saas ved hjælp af saas-variablerne. Vi har forsøgt at give dig en detaljeret vejledning for at hjælpe dig gennem processen med visualiseringer og trinvise funktioner. Det er super nemt at tilsidesætte bootstrap, forudsat at du ved, hvordan du finder de vigtige variabler. Og hvis du har gennemgået vores blog, så er du helt klar til at override!