1. Quellcodedatei
_grid.scss: Grid -Systemklassendatei
Mixins/_grid.scss: Support Mixin -Sammlungen von Grid Systems implementiert
Mixins/_grid-Framework.scss: Das von Grid System implementierte Kernmixin
2. unterstützte Funktionen
1. Erkennen Sie das Layout um Prozentsatz
2. Erkennen Sie die Positionierung des Netzes
3.. Implementieren Sie die Nistung von Gittern
4. Wenn Sie nur das Netzsystem verwenden, können Sie die Datei stootstrap-Grid.scss nur codieren
Implementierungsprinzip
1. Layout nach Prozentsatz , das Hauptproblem besteht darin, die Breite auf verschiedenen Geräten gleichmäßig zu verteilen. Bootstrap verwendet nur einen einfachen Prozentsatz, und der gleiche Prozentsatz wird unter einer beliebigen Größe verwendet.
2. Positionierung von Gittern: Löst die Fähigkeit von Gittern, sich nach links, rechts zu bewegen und mehrere Zellen mit Gittern nach rechts zu verschieben
3.. Verschachteln von Gitter: Implementieren Sie das Netzlayoutsystem nach dem Verschachtelungsinhalt.
4. Quellcodeanalyse
1. _grid.scss: Die vom Netzsystem generierte Hauptklasse, die sich auf Variablen und verwandte Methoden in den Mixins/_grid.scss, Mixins/_grid-Framework.scss, variablen.scss bezieht.
Erstens: Definieren Sie zwei Containerklassen
A) Container: Ein Gitterbehälter, der unterschiedliche Breiten nach verschiedenen Geräten definiert und den Vollbild nicht füllt;
b) Continaer-Fluid: Gitterbehälter, Vollbild mit jeder Unterstützung
Sowohl Container als auch Container-Fluid verwenden Make-Container (Mixins/_grid.scss). Make-Container implementiert nur Kontrollpersonen wie Zentrierung, linke und rechte Ränder, Löschen von Schwimmern usw.; Der Container definiert die Breite des Containers nach verschiedenen Geräten.
Dann: Definieren Sie Zeile (Reihe):
Make-Row (Mixins/_grids.scss) wird aufgerufen, um die Definition der Löschen von schwimmenden und linken und rechten Rändern zu erreichen. Wenn die Unterstützung für das Flex-Layout in 4.0 aktiviert ist, wird die Anzeige des Behälters auf Flex- und Flex-Wrap als Wrap und ein klares Schwimm eingestellt.
Weiter: Rufen Sie direkt Make-Grid-Säulen (Mixins/_grid-Framework.scss) an, um die Zellbetrieb zu erreichen
a) Make-Grid-Säulen: Die Eingangsmethode für die Zellgenerierung, die Gesamtzahl der Gitter, die Randbreite und mehrere unterstützte Größen übergeben
b) Machen Sie Grid-Säulen auf viele Methoden in Mixins/_grid.scss:
a) Verwenden Sie die Kartenschlüsselfunktion, um eine Kartenschlüsselsammlung durchzuführen.
Die @extend -Funktion wird verwendet, die zur Vererbung, zur Implementierung des linken Gleits aller Cols und zur relativen Positionierung aller Cols verwendet wird.
@For $ i von 1 bis $ columns {.col-#{$ breakpoint}-#{$ i} {@extend %Grid-Säule; // Erweiterung ist Erbschaft, fusionieren Sie diese in eine Stilsammlung //. ....}}}a) Col-SPAN-Funktion zur Implementierung der Berechnung der Col-Breite implementieren
b) Rufen Sie die Make-Col-Modifier-Methode in Mixins/_grid.scss auf, um die Erzeugung von Push-, Pull- und Offset-Stilen zu ermitteln:
ich. Drücken: Drücken Sie ein paar Netze nach rechts, indem Sie links mit
ii. Pull: Drücken Sie ein paar Netze nach links mit rechts
III. OFFSET: Es verwendet die Rand-Links-Implementierung und drückt sie nach rechts auf einen Prozentsatz.
@mixin make-col-offset($size, $columns: $grid-columns) { margin-left: percentage($size / $columns);}@mixin make-col-push($size, $columns: $grid-columns) { left: if($size > 0, percentage($size / $columns), auto);}@mixin make-col-pull($size, $columns: $grid-columns) { right: if($size > 0, percentage($size / $columns), auto);}@mixin make-col-pull($size, $columns: $grid-columns) { right: if($size > 0, percentage($size / $columns), auto);}@mixin make-col-modifier($type, $size, $columns) { // Work around the lack of dynamic mixin @include support @if $type == Push {@include make-col-push ($ size, $ columns); } @else if $ type == pull {@include make-col-pull ($ size, $ columns); } @else if $ type == offset {@Include make-col-offset ($ size, $ columns); }}Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.