Bootstrap är ett välkänt ramverk med färdiga komponenter som hjälper webbdesigners att snabbt bygga en webbplats. Den nya versionen av Bootstrap 4.2.1 använder Sass som preprocessor. Så i den här bloggen kommer vi att förstå hur man åsidosätter Bootstrap med hjälp av sass-variablerna.

Vi vet att vi måste åsidosätta Bootstrap-stilen för att ge webbplatsen ett nytt utseende. Precis som för theme-background, typsnitt, färger, avstånd osv. är variablerna ansvariga för Scss för utgången. Här måste vi åsidosätta Bootstraps standardvariabler. Låt oss gå vidare till att åsidosätta Bootstrap.

Add Bootstrap In The Project

Först av allt laddar du ner bootstrap från Bootstraps nedladdningssida. Därefter gör vi en mapp med namnet vendors i mappen scss och lägger till Bootstrap i den mappen. Vi kommer inte att ändra något i Bootstrap-filerna, eftersom det kommer att skapa problem i framtiden när du vill uppdatera Bootstrap. När du har skapat mappen kan du lägga till bootstrap.scss i den filen, som du har kompilerat.

I Bootstrap-4 använder de flaggan !default, som beskriver standardvariabelns standard. Du behöver bara kopiera variabeln, lägga till ditt värde och ta bort !default-flaggan från variabeln.

Override Variables

Bootstrap har en egen “_variables.scss” i mappen “scss”, som innehåller alla variabler som används i Bootstrap. Lägg nu till namnmappen “abstracts” i din scss-mapp och skapa “_custom-variables.scss” i den mappen.

Öppna nu Bootstrap > scss > “_variables.scss”. Vi ändrar inte Bootstraps variabler här direkt, så vi kopierar variabler från “_variables.scss” och klistrar in dem i “_custom-variables.scss”. När du har klistrat in variablerna kan du lägga till nya värden i variablerna.

Du måste uppdatera den primära temafärgen (blå) och definiera den i din fil “_custom-variables.scss”. Variabeln måste komma före alla @import-angivelser. När du kompilerar Sass-koden kan denna nya $primärfärg användas för all kod som refererar till variabeln $primary.

Modifiera standardbrytpunkterna

Grid-brytpunkter

Brytpunkterna för bootstrap definieras också i filen _variables.scss. Här är standardvärdena:

Du kan ändra de aktuella brytpunkterna eller lägga till nya. Du behöver bara åsidosätta variabeln $grid-breakpoints och bara lägga till de nödvändiga värdena.

Containers Width

Bootstrap container-max-widths definieras också i filen _variables.scss. Här är standardvärdena:

Uppdaterad i “_custom-variables.scss”

Anpassa avståndsreglerna

Bootstrap tillhandahåller en uppsättning av avstånd som hjälper till att justera avståndet. Variablerna $spacer och $spacer hanterar basvärdet för avstånden. Du kan uppdatera, lägga till och åsidosätta dem.

Standardvariabler i Bootstrap

Override Variables

Bootstrap tillhandahåller också många variabler som vi kan åsidosätta, till exempel:
Tabeller, knappar, formulär, dropdowns, navigeringsfält, sidindelning, verktygstips, modaler, etc…

Använd bara det du behöver

Bootstrap har så många komponenter som du kan använda, men du behöver inte använda alla komponenter som tillhandahålls av bootstrap. Du har kontroll över bootstrap, så inkludera de komponenter som behövs. Om du inte kommer att inkludera dem kommer CSS-filen att bli lättare med mindre kod. Och du kan inkludera dessa komponenter när du behöver dem i framtiden. Om du behöver använda komponenterna i framtiden är det bara att avkommentera dem.

Några användbara variabler

Bootstrap tillhandahåller några viktiga globala alternativ som du kan växla. Som border-radius, box-shadow och gradienter etc.

Du hittar dessa variabler i filen scss/_variables.scss.

$enable-caret: Används för att aktivera pseudoelementet caret på .dropdown-toggle.
$enable-rounded: Används för att lägga till eller ta bort border-radius (standard: true)
$enable-shadows: Används för att lägga till eller ta bort border-radius (standard: true): Används för att lägga till eller ta bort box-skuggor (standard: false)
$enable-gradients: Används för att lägga till eller ta bort box-skuggor (standard: false): Används för gradienter via bakgrundsbild (standard: false)
$enable-transitions: Används för gradienter via bakgrundsbild (standard: false): Används för att lägga till eller ta bort övergångar (standard: true)
$enable-grid-classes: Används för att lägga till eller ta bort övergångar (standard: true)
$enable-grid-classes: Används för att lägga till eller ta bort övergångar: För att lägga till eller ta bort klasser för rutnätssystemet (standard: true)
$enable-print-styles:

Du kan kontrollera sass-optioner här:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options

Slutsats

Du har sett hur enkelt det är att åsidosätta bootstrap -saas med hjälp av saas-variablerna. Vi har försökt ge dig en detaljerad guide för att hjälpa dig genom processen med visualiseringar och steg-för-steg-funktioner. Det är superenkelt att åsidosätta bootstrap, förutsatt att du vet hur du hittar de viktiga variablerna. Och om du har gått igenom vår blogg är du redo att override!