A Bootstrap egy jól ismert, előre elkészített komponenseket tartalmazó keretrendszer, amely segít a webdesignereknek abban, hogy gyorsan felépítsenek egy webhelyet. A Bootstrap 4.2.1 új verziója a Sass-t használja preprocesszorként. Így ebben a blogban megértjük, hogyan lehet felülírni a Bootstrap-et a sass változók segítségével.
Tudjuk, hogy felül kell írnunk a Bootstrap stílusát, hogy új külsőt adjunk a webhelynek. Csakúgy, mint a téma-háttér, a betűtípusok, a színek, a távolság stb. változók felelősek Scss a kimenetért. Itt kell felülbírálnunk az alapértelmezett Bootstrap változókat. Lépjünk tovább a Bootstrap felülírásához.
Add Bootstrap In The Project
Először is töltsük le a Bootstrap-t a Bootstrap letöltési oldalról. Ezután készítsünk egy mappát vendors néven az scss mappában, és adjuk hozzá a Bootstrap-et ebben a mappában. A Bootstrap fájlokban nem változtatunk semmit, mert ez a későbbiekben problémát fog okozni, ha frissíteni akarjuk a Bootstrap-et. Miután létrehoztuk a mappát, abban a fájlban hozzáadhatjuk a bootstrap.scss-t, amit lefordítottunk.
A Bootstrap-4-ben a !default flag-et használják, ami az alapértelmezett változó alapértelmezését írja le. Csak másolnod kell ezt a változót, hozzáadni az értékedet, és eltávolítani a !default flaget a változóból.
Override Variables
A Bootstrapnek van egy saját “_variables.scss” állománya az “scss” mappában, amely tartalmazza a Bootstrapben használt összes változót. Most adjuk hozzá az “abstracts” nevű mappát az scss mappánkhoz, és hozzuk létre a “_custom-variables.scss”-t ebben a mappában.
Most nyissuk meg a Bootstrap > scss > “_variables.scss”-t. Itt nem változtatjuk meg közvetlenül a Bootstrap változókat, ezért a “_variables.scss”-ből másoljuk ki a változókat, és illesszük be a “_custom-variables.scss”-be. A változók beillesztése után új értéket adhatunk a változókhoz.
Az elsődleges téma színét (kék) frissíteni kell, és meg kell határozni a “_custom-variables.scss” fájlban. A változónak az összes @import utasítás előtt kell állnia. Amikor lefordítja a Sass kódot, ez az új $primary szín használható minden olyan kódhoz, amely hivatkozik a $primary változóra.
Az alapértelmezett töréspontok módosítása
Grid töréspontok
A bootstrap töréspontok szintén az _variables.scss fájlban vannak definiálva. Itt vannak az alapértelmezett értékek:
A jelenlegi töréspontokat megváltoztathatja vagy újakat adhat hozzá. Csak a $grid-breakpoints változót kell felülírni, csak a szükséges értékeket kell hozzáadni.
Containers Width
Bootstrap container-max-widths szintén a _variables.scss fájlban van definiálva. Itt vannak az alapértelmezett értékek:
A “_custom-variables.scss”
A távolságszabályok testreszabása
A Bootstrap biztosít egy távolságkészletet, amely segít a távolságok beállításában. A $spacer és $spacer változók kezelik a távolságok alapértékét. Ezeket frissítheti, hozzáadhatja és felülbírálhatja.
Default Variables In Bootstrap
Override Variables
A Bootstrap számos változót is biztosít, amelyeket felülbírálhatunk, mint például:
Csak azt használd, amire szükséged van
A bootstrap olyan sok komponenssel rendelkezik, amit használhatsz, de nem kell az összes komponenst használnod, amit a bootstrap biztosít. Ön rendelkezik a bootstrap felett, ezért csak azokat a komponenseket tartalmazza, amelyekre szüksége van. Ha nem foglalja bele őket, akkor a CSS fájl könnyebb lesz, kevesebb kóddal. És bármikor beépítheti ezeket a komponenseket, amikor a jövőben szüksége lesz rájuk. Ha a jövőben szüksége lesz a komponensekre, akkor egyszerűen vegye ki a megjegyzéseket.
Néhány hasznos változó
A bootstrap biztosít néhány fontos globális opciót, amelyeket kapcsolhat. Mint a border-radius, box-shadow, és gradients, stb.
Ezeket a változókat az scss/_variables.scss fájlban találod.
$enable-caret: A .dropdown-toggle pseudo element caret engedélyezéséhez használd.
$enable-rounded: (alapértelmezett: true)
$enable-shadows: Használja a box-shadows hozzáadásához vagy eltávolításához (alapértelmezett: false)
$enable-gradients: (alapértelmezett: false)
$enable-transitions:
$enable-grid-classes: Használja az átmenetek hozzáadásához vagy eltávolításához (alapértelmezett: true)
$enable-grid-classes: Osztályok hozzáadásához vagy eltávolításához a rácsrendszerhez (alapértelmezett: true)
$enable-print-styles: A nyomtatás optimalizálásához szükséges stílusok engedélyezése.
A sass-opciókat itt ellenőrizheti:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options
Következtetés
Láthattuk, milyen egyszerű a bootstrap -saas felülírása a saas változók segítségével. Igyekeztünk egy részletes útmutatót adni, amely képekkel és lépésről-lépésre bemutatott funkciókkal segíti a folyamatot. Szuper egyszerű a bootstrap felülírása, feltéve, hogy tudod, hogyan találod meg a fontos változókat. És ha végigmentél a blogunkon, akkor már készen állsz a felülírásra!