Bootstrap Utility

Wir brauchen einen Sass Compiler, um Bootstrap Utility zu verwenden. Die Grundlage dieser Funktion basiert auf der dynamischen Erstellung von CSS-Maps mit Sass. Sie können Live Sass Compiler für Visual Studio Code verwenden. Nach der Installation dieses Plugins müssen wir die für das Dienstprogramm erforderlichen Bootstrap-Dateien importieren. 

Diese sind;

@import "./node_modules/bootstrap/scss/functions"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/utilities";

Nach dem Import in unsere Seite nehmen wir die erforderlichen Dienstprogrammdefinitionen vor. Nach den Definitionen müssen wir unten auf der Seite einen weiteren Importvorgang durchführen.

@import "./node_modules/bootstrap/scss/bootstrap.scss";

In der Mitte dieser beiden Importvorgänge können wir nun Utility-Definitionen vornehmen.

Bootstrap Utility müssen wir zwei Pflichtfelder definieren, um die Funktion nutzen zu können. Dies sind Eigenschaft und Werte. Schauen wir uns nun das folgende Beispiel an.

$utilities: (  "custom-width": (    property: width,    values: (      10: 10%,      20: 20%,      30: 30%,      40: 40%,      50: 50%,      60: 60%,      70: 70%,      80: 80%,      90: 90%,      100: 100%,    ),   ), );

Wie in diesem Codeblock zu sehen ist, wird Utility als $utility:() initialisiert. Dann definieren wir einen Namen für die erstellte Klasse. Nachdem wir "custom-width" definiert haben, geben wir im Abschnitt property an, welche Eigenschaft von css diese erstellte Klasse beeinflussen wird. Im Abschnitt values machen wir unsere Definitionen in der Form name:value.

Nachdem wir unsere Definitionen vorgenommen haben, arbeitet Sass automatisch und erzeugt eine css-Datei wie unten.

.width-10 { width: 10% !important; } .width-20 { width: 20% !important; } .width-30 { width: 30% !important; } .width-40 { width: 40% !important; } .width-50 { width: 50% !important; } .width-60 { width: 60% !important; }

Wie wir im Beispiel sehen können, erlaubt uns das Bootstrap-Dienstprogramm, schnell neue Klassen für unser benutzerdefiniertes Thema zu erstellen. Jetzt können wir auf die Klasse für die Breite als .width-"value value" zugreifen. Wenn wir wollen, können wir jedoch ein Präfix zu den Klassen hinzufügen, indem wir die Eigenschaft class verwenden.

 "custom-border": (       property: border,       responsive: true,       class:c-border,       values: (         slim: 3px solid #852929,         medium: 5px solid #852929,         bold: 7px solid #852929,       ),     ),

Wenn die Klassendefinition wie in diesem Codeblock angegeben vorgenommen wird, können wir auf unsere Klassen wie folgt zugreifen und sie verwenden.

.c-border-slim { border: 3px solid #852929 !important; } .c-border-medium { border: 5px solid #852929 !important; } .c-border-bold { border: 7px solid #852929 !important; }

Eine Funktion, die wir optional mit Bootstrap Utility verwenden können, ist die Responsive-Funktion. Mit dieser Funktion kann Bootstrap problemlos responsive Klassen für uns erstellen. Die Anweisung responsive:true, im vorherigen Codeblock aktiviert diese Funktion. Zusammen mit den 3 Klassen, die im obigen Codeblock gezeigt werden, wurden 15 Klassen für responsive Designs erstellt. Sie können die Klassendefinitionen, die für responsive-md-Bildschirme erstellt wurden, in den folgenden Codeblöcken untersuchen.

.c-border-md-slim {   border: 3px solid #852929 !important; } .c-border-md-medium {   border: 5px solid #852929 !important; } .c-border-md-bold {   border: 7px solid #852929 !important; }

Eine der nützlichen Funktionen, die mit Utility geliefert werden, ist Rfs. Wir können diese Abkürzung mit "Responsive Font Size" übersetzen. Dank Rfs kann Bootstrap die Schrifthöhe auf Mobilgeräten automatisch berechnen.

 "font-size": (   rfs: true,   property: font-size,   class: mfs,   values: $font-size, ),

Im obigen Codeblock sehen wir, dass eine Definition als values:$font-sizes vorgenommen wird. Diese Definition stammt aus der Definition $font-sizes in der Datei _variables.scss, die wir zuvor importiert haben. Auf diese Weise können wir die globalen Definitionen verwenden, die wir zuvor vorbereitet haben, ohne einen Wert in den Abschnitt values einzugeben.

.mfs-1 { font-size: calc(1.375rem + 1.5vw) !important; } .mfs-2 { font-size: calc(1.325rem + 0.9vw) !important; } .mfs-3 { font-size: calc(1.3rem + 0.6vw) !important; } .mfs-4 { font-size: calc(1.275rem + 0.3vw) !important; } .mfs-5 { font-size: 1.25rem !important; } .mfs-6 { font-size: 1rem !important; }

Wenn wir das Bootstrap-Utility im Allgemeinen zusammenfassen, ist es eine sehr nützliche Funktion für die schnelle Erstellung eines benutzerdefinierten Themas. Dank dieser Funktion können wir Klassendefinitionen unter Verwendung von in global definierten Variablen erstellen. Wir müssen keine zusätzlichen Codezeilen für die responsive Kompatibilität schreiben, es reicht aus, responsive:true in der Utility zu definieren. Ein separates Feature ist auch für die Definition von Schriftarten auf der mobilen Seite des Themas gedacht. Wir können mit Rfs eine mobile kompatible Schriftgröße erstellen und unser benutzerdefiniertes Thema nützlicher machen.