Bootstrap is een bekend framework met kant-en-klare componenten dat webdesigners helpt om snel een site te bouwen. De nieuwe versie van Bootstrap 4.2.1 maakt gebruik van Sass als de preprocessor van keuze. Dus in deze blog, zullen we begrijpen hoe Bootstrap te overschrijven met behulp van de sass variabelen.
We weten dat we de Bootstrap stijl moeten overschrijven om een nieuwe look te geven aan de website. Net als voor thema-achtergrond, lettertypen, kleuren, spatiëring, enz. variabelen zijn verantwoordelijk voor Scss voor de output. Hier moeten we de standaard Bootstrap variabelen overschrijven. Laten we verder gaan met het overschrijven van Bootstrap.
Voeg Bootstrap toe aan het project
Ten eerste moeten we bootstrap downloaden van de Bootstrap download pagina. Daarna maken we een map onder de naam vendors in de scss map en voegen Bootstrap toe in die map. We zullen niets veranderen in de Bootstrap bestanden, omdat dit in de toekomst een probleem zal opleveren wanneer je Bootstrap wilt updaten. Nadat je de map hebt aangemaakt, kun je bootstrap.scss toevoegen aan dat bestand, dat je hebt gecompileerd.
In Bootstrap-4, gebruiken ze de !default vlag, die de standaard variabele beschrijft. U hoeft alleen maar die variabele te kopiëren, uw waarde toe te voegen, en de !default vlag uit de variabele te verwijderen.
Override Variabelen
Bootstrap heeft zijn eigen “_variables.scss” in de “scss” map, die alle variabelen bevat die in Bootstrap worden gebruikt. Voeg nu de map met de naam “abstracts” toe aan je scss-map en maak “_custom-variables.scss” in die map.
Nu, open Bootstrap > scss > “_variables.scss”. We veranderen hier niet direct Bootstrap variabelen, dus we kopiëren variabelen uit “_variables.scss”, en plakken ze in “_custom-variables.scss”. Nadat u de variabelen hebt geplakt, kunt u nieuwe waarden toevoegen in variabelen.
U moet de primaire themakleur (blauw) bijwerken, en deze definiëren in uw “_custom-variables.scss”-bestand. De variabele moet voor alle @import statements komen. Wanneer u de Sass code compileert, kan deze nieuwe $primary kleur worden gebruikt voor alle code die verwijst naar de $primary variabele.
De standaard onderbrekingspunten wijzigen
Rooster onderbrekingspunten
Bootstrap onderbrekingspunten zijn ook gedefinieerd in het _variables.scss bestand. Dit zijn de standaardwaarden:
U kunt de huidige breakpoints wijzigen of nieuwe toevoegen. U hoeft alleen maar de variabele $grid-breakpoints te overschrijven en alleen de vereiste waarden toe te voegen.
Containers breedte
Bootstrap container-max-breedtes zijn ook gedefinieerd in het bestand _variables.scss. Dit zijn de standaardwaarden:
Bijgewerkt in “_custom-variables.scss”
De spatiëringsregels aanpassen
Bootstrap biedt een set spatiëringsregels, die helpt bij het aanpassen van de spatiëring. De variabelen $spacer en $spacer beheren de basiswaarde van de spatiëring. Je kunt ze bijwerken, toevoegen en opheffen.
Standaardvariabelen in Bootstrap
Override variabelen
Bootstrap biedt ook veel variabelen die we kunnen overschrijven, zoals:-
Tabellen, Knoppen, Formulieren, Dropdowns, Navbar, Paginatie, Tooltips, Modals, enz…
Gebruik alleen wat je nodig hebt
Bootstrap heeft zo veel componenten die je kunt gebruiken, maar je hoeft niet alle componenten te gebruiken die door bootstrap worden geleverd. Je hebt controle over bootstrap, dus includeer de componenten die nodig zijn. Als je ze niet opneemt, dan zal het CSS bestand lichter zijn met minder code. En je kunt deze componenten toevoegen wanneer je ze in de toekomst nodig hebt.
Enkele nuttige variabelen
Bootstrap biedt enkele belangrijke globale opties die u kunt uitschakelen. U kunt deze variabelen vinden in het bestand scss/_variables.scss.
$enable-caret: Gebruik deze om de pseudo-elementcaret op .dropdown-toggle in te schakelen.
$enable-rounded: Gebruikt voor het toevoegen of verwijderen van rand-radius (standaard: true)
$enable-shadows: Gebruiken voor het toevoegen of verwijderen van box-shadows (standaard: false)
$enable-gradients: Gebruiken voor kleurverlopen via achtergrond-afbeelding (standaard: false)
$enable-transitions: Gebruiken voor het toevoegen of verwijderen van overgangen (standaard: true)
$enable-grid-classes: Voor het toevoegen of verwijderen van klassen voor het rastersysteem (standaard: true)
$enable-print-styles: Schakelt stijlen in voor het optimaliseren van afdrukken.
U kunt de sass-opties hier controleren:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options
Conclusie
U hebt gezien hoe eenvoudig het is om bootstrap -saas te overschrijven met behulp van de saas-variabelen. We hebben geprobeerd om je een gedetailleerde gids te geven om je door het proces te helpen met visuals en stap-voor-stap functies. Het is super eenvoudig om de bootstrap te overschrijven, op voorwaarde dat je weet hoe je de belangrijke variabelen moet vinden. En als je onze blog hebt doorgenomen, dan ben je helemaal klaar om te overriden!