Bootstrap ist ein bekanntes Framework mit vorgefertigten Komponenten, das Webdesignern hilft, schnell eine Website zu erstellen. Die neue Version von Bootstrap 4.2.1 verwendet Sass als den Präprozessor der Wahl. In diesem Blog werden wir verstehen, wie man Bootstrap mit Hilfe der Sass-Variablen außer Kraft setzt.
Wir wissen, dass wir den Bootstrap-Stil außer Kraft setzen müssen, um der Website ein neues Aussehen zu geben. Genau wie für Theme-Hintergrund, Schriftarten, Farben, Abstände, etc. sind Variablen für Scss für die Ausgabe verantwortlich. Hier müssen wir die Standard-Bootstrap-Variablen außer Kraft setzen. Machen wir weiter mit dem Überschreiben von Bootstrap.
Hinzufügen von Bootstrap in das Projekt
Zuallererst laden wir Bootstrap von der Bootstrap Download Seite herunter. Danach erstellen wir einen Ordner mit dem Namen vendors im scss-Ordner und fügen Bootstrap in diesen Ordner ein. Wir werden nichts an den Bootstrap-Dateien ändern, da dies in der Zukunft zu Problemen führen wird, wenn Sie Bootstrap aktualisieren möchten. Nachdem Sie den Ordner erstellt haben, können Sie bootstrap.scss in die Datei einfügen, die Sie kompiliert haben.
In Bootstrap-4 wird das Flag !default verwendet, das die Standardvariable als Standard beschreibt. Sie müssen nur diese Variable kopieren, Ihren Wert hinzufügen und das !default Flag aus der Variable entfernen.
Override Variables
Bootstrap hat seine eigene “_variables.scss” im “scss” Ordner, die alle in Bootstrap verwendeten Variablen enthält. Fügen Sie nun den Ordner mit dem Namen “abstracts” zu Ihrem scss-Ordner hinzu und erstellen Sie “_custom-variables.scss” in diesem Ordner.
Nun öffnen Sie Bootstrap > scss > “_variables.scss”. Wir ändern die Bootstrap-Variablen hier nicht direkt, also kopieren wir die Variablen aus “_variables.scss” und fügen sie in “_custom-variables.scss” ein. Nach dem Einfügen der Variablen können Sie neue Werte in die Variablen einfügen.
Sie müssen die primäre Themenfarbe (blau) aktualisieren und in Ihrer Datei “_custom-variables.scss” definieren. Die Variable muss vor allen @import-Anweisungen stehen. Wenn Sie den Sass-Code kompilieren, kann diese neue $primary-Farbe für alle Codes verwendet werden, die auf die $primary-Variable verweisen.
Ändern Sie die Standard-Breakpoints
Grid-Breakpoints
Bootstrap-Breakpoints werden ebenfalls in der Datei _variables.scss definiert. Hier sind die Standardwerte:
Sie können die aktuellen Haltepunkte ändern oder neue hinzufügen. Sie müssen nur die Variable $grid-breakpoints überschreiben und nur die benötigten Werte hinzufügen.
Containers Width
Bootstrap container-max-widths sind auch in der Datei _variables.scss definiert. Hier sind die Standardwerte:
Aktualisiert in “_custom-variables.scss”
Anpassen der Abstandsregeln
Bootstrap bietet eine Reihe von Abständen, die bei der Anpassung der Abstände helfen. Die Variablen $spacer und $spacer verwalten den Basiswert der Abstände. Sie können sie aktualisieren, hinzufügen und überschreiben.
Standardvariablen in Bootstrap
Überschreibungsvariablen
Bootstrap bietet auch viele Variablen, die wir überschreiben können wie:-
Tabellen, Buttons, Formulare, Dropdowns, Navbar, Pagination, Tooltips, Modals, etc…
Nur verwenden, was man braucht
Bootstrap hat so viele Komponenten, die man verwenden kann, aber man muss nicht alle Komponenten verwenden, die von Bootstrap bereitgestellt werden. Sie haben die Kontrolle über Bootstrap, also binden Sie die Komponenten ein, die Sie benötigen. Wenn Sie sie nicht einbeziehen, wird die CSS-Datei mit weniger Code auskommen. Und Sie können diese Komponenten einbinden, wenn Sie sie in Zukunft benötigen. Wenn Sie die Komponenten in der Zukunft verwenden müssen, dann entfernen Sie einfach die Kommentare.
Einige nützliche Variablen
Bootstrap bietet einige wichtige globale Optionen, die Sie umschalten können. Wie border-radius, box-shadow, und gradients, etc.
Sie können diese Variablen in der scss/_variables.scss Datei finden.
$enable-caret: Zum Aktivieren des Pseudo-Elements caret auf .dropdown-toggle.
$enable-rounded: Zum Hinzufügen oder Entfernen von border-radius (Standard: true)
$enable-shadows: Für das Hinzufügen oder Entfernen von Box-Shadows (Standard: false)
$enable-gradients: Wird für Farbverläufe über background-image verwendet (Standard: false)
$enable-transitions: Für das Hinzufügen oder Entfernen von Übergängen (Standard: true)
$enable-grid-classes: Zum Hinzufügen oder Entfernen von Klassen für das Rastersystem (Standard: true)
$enable-print-styles: Aktiviert Stile zur Optimierung des Drucks.
Sie können sass-Optionen hier überprüfen:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options
Abschluss
Sie haben gesehen, wie einfach es ist, bootstrap -saas mit Hilfe der saas-Variablen zu überschreiben. Wir haben versucht, Ihnen einen detaillierten Leitfaden zur Verfügung zu stellen, der Sie mit visuellen Darstellungen und Schritt-für-Schritt-Funktionen durch den Prozess führt. Es ist super einfach, bootstrap zu überschreiben, vorausgesetzt, Sie wissen, wie Sie die wichtigen Variablen finden. Und wenn Sie unseren Blog durchgelesen haben, dann sind Sie bereit zum Überschreiben!