Bootstrap 3.0 Studiennotizen Grid-System-Fall

Vorwort

Im vorherigen Artikel haben wir hauptsächlich die Grundprinzipien des Rastersystems gelernt und die Prinzipien anhand einfacher Fälle in die Praxis umgesetzt.

Der Hauptinhalt dieses Artikels wird in die folgenden Teile unterteilt

1. Rasteroptionen

2. Vom Stapeln zur horizontalen Anordnung

3. Mobile Geräte und Desktop

4. Responsive Spalten-Resets

5. Spaltenversatz

6. Verschachtelte Spalten

7. Spaltensortierung

8. Zusammenfassung

Raster-Optionen

Die folgenden Screenshots zeigen, wie das Rastersystem von Bootstrap auf verschiedenen Mobilgeräten funktioniert.

Wie aus den obigen Screenshots ersichtlich ist, legt Bootstrap unterschiedliche Stilklassen für Bildschirme unterschiedlicher Größe (einschließlich Mobiltelefone, Tablets, PCs usw.) fest, wodurch Entwickler bei der Entwicklung mehr Auswahlmöglichkeiten haben. Nach meinem Verständnis gilt: Wenn Sie oben mehrere unterschiedliche Stilklassen für ein Element verwenden, wählt das Element basierend auf den unterschiedlichen Größen die am besten geeignete (am besten passende) Stilklasse aus. Nehmen wir zur Veranschaulichung ein einfaches Beispiel: Wir verwenden beispielsweise zwei Stilklassen für ein Element: .col-md- und .col-lg. Sie können sich auf den Screenshot oben beziehen.

Im ersten Fall: Größe>=1200px; dann wird .col-lg ausgewählt.

Zweiter Fall: Größe>=992px und Größe<=1200px; dann wird .col-md ausgewählt.

Im dritten Fall, wenn die Größe weniger als 992 Pixel beträgt, wirkt keine der beiden Stilklassen auf das Element.

Vom Stapeln zur horizontalen Anordnung

Die vier Stilklassen in den Rasteroptionen werden alle basierend auf der Klasse .row verwendet, die normalerweise im .container verwendet wird.

Es geht darum, die richtige Stilklasse im richtigen Container zu verwenden.

Mit einem einzigen Satz von .col-md-*-Rasterklassen können Sie ein grundlegendes Rastersystem erstellen, das auf Telefonen und Tablets (im Bereich von sehr kleinen bis kleinen Bildschirmen) zunächst gestapelt ist und sich dann auf Desktop-Geräten (mit mittleren Bildschirmen) horizontal bewegt. Platzieren Sie einfach Spalten (col-*-*) in einer beliebigen Zeile.

Sie können die Breite des Browsers steuern, um die Effekte der Stapelung und horizontalen Anordnung anzuzeigen.

Offensichtlich handelt es sich hierbei um den Stapeleffekt, also wenn die Browserbreite auf eine kleinere Größe angepasst wird.

Jetzt ist es horizontal angeordnet. Nachdem Sie die Browserbreite auf eine etwas größere Größe angepasst haben. Um die Wirkung zu testen, können Sie auch die anderen drei Klassen verwenden.

Mobil und Desktop

Aus den obigen Beispielen können wir erkennen, dass .col-md-* bei Verwendung auf einem kleinen Bildschirm gestapelt erscheint. Daher müssen Entwickler die Seitenanzeige auf einem kleinen Bildschirm manchmal horizontal anordnen. Dann kommt unsere .col-xs-* (Stilklasse für Bildschirme kleiner als 768 Pixel) gelegen.

Aus dem Code können wir entnehmen, dass wir für die ersten beiden Divs in der .row-Stilklasse für jedes Element zwei Stilklassen festlegen.

Dies ist der Effekt, der auf einem etwas größeren Bildschirm angezeigt wird. Die beiden Stile für jedes Element werden bei unterschiedlichen Größen entsprechend ausgewählt. Bei einem etwas größeren Bildschirm lautet die ausgewählte Stilklasse .col-md-*.

Also:

Erste Reihe: Verhältnis 8 zu 4.

Zweite Reihe: Drei 4er, in drei gleiche Teile geteilt.

Dritte Reihe: Obwohl 6 und 6 große Größen sind, sind sie, da es nur einen Stil gibt, auch in zwei gleiche Teile unterteilt.

Wenn der Seitenbildschirm nun kleiner als eine bestimmte Größe ist, wählen Sie die Stilklasse für jedes Element erneut aus. Jetzt sind die ersten beiden .row-Optionen beide col-xs-*.

Also:

Erste Reihe: Die beiden Elemente sind in 12 und 6 unterteilt, und eine Reihe besteht aus 12 Teilen, sodass das zweite Element die Hälfte der 6 Teile umschließt und einnimmt.

Zweite Reihe: 3 Teile zu je 6. Und eine Reihe besteht aus 12 Kopien. Das dritte Element wird also sechs gemeinsame Positionen umschließen und einnehmen.

Responsive Spalten-Resets

Durch die Analyse der beiden oben genannten Fälle ist es einfach, mit diesen vier Rasterklassen ein komplexeres Seitenlayout zu entwerfen. Es gibt jedoch immer noch Fälle, in denen eine Spalte in einer Zeile höher ist als andere Spalten. Vielleicht verstehen Sie jetzt noch nicht ganz, was ich meine, aber das macht nichts, kommen wir gleich zur Sache.

Schauen wir uns zunächst den Seitenanzeigeeffekt auf dem großen Bildschirm an

Die Höhe des ersten Elements ist tatsächlich unterschiedlich. Schauen Sie dann auf den kleinen Bildschirm.

Schauen Sie sich an, wie es jetzt angeordnet ist, da die Stilklasse .col-xs-* für kleine Bildschirme ausgewählt ist und jeweils 6 Kopien belegt. Ich weiß nicht, ob das der gewünschte Effekt ist. Möchten Sie diese vier Elemente also in zwei Zeilen mit jeweils zwei Elementen in jeder Zeile auf einem kleinen Bildschirm sehen?

Als nächstes werden wir den obigen Code leicht ändern, was eigentlich das Hinzufügen einer Codezeile ist

Dieser Effekt wird immer noch durch zwei Zeilen und zwei Spalten erreicht. Selbstverständlich können auch responsive Tools zum Einsatz kommen, die später noch genauer erläutert werden und auf eine Beispieldemonstration wird hier vorerst verzichtet.

Spaltenversatz

Das ist eigentlich ganz einfach. Sie können eine Stilklasse, .col-md-offset-*, verwenden, um die Spalte nach rechts zu verschieben. Diese Klassen vergrößern den linken Rand aller Spalten mithilfe des *-Selektors. Beispielsweise verschiebt .col-md-offset-4 .col-md-4 um 4 Spaltenbreiten nach rechts.

Wenn Sie den obigen Code lesen, können Sie sich wahrscheinlich dessen Layout vorstellen.

Verschachtelte Spalten

Um Inhalte mithilfe des integrierten Rasters zu verschachteln, fügen Sie den vorhandenen .col-md-*-Spalten eine neue Zeile und eine Reihe von .col-md-*-Spalten hinzu. Die Summe der in der verschachtelten Spalte enthaltenen Spalten sollte 12 ergeben.

Aus dem obigen Code können wir erkennen, dass zuerst eine Zeile definiert und dann dieser Zeile eine Spalte .col-md-9 hinzugefügt wird, was darauf hinweist, dass dieses Element 9 Spalten einnimmt.

Anschließend werden diesem 9-Spalten-Element zwei unterschiedliche Zeilen hinzugefügt.

Das heißt, die erste Zeile: Die erste Zeile ist in zwei Teile unterteilt, von denen jeder 6 Spalten einnimmt, also insgesamt 12 Spalten, aber ihre Gesamtbreite entspricht der Breite der Elemente außerhalb, die 9 Spalten einnehmen.

Die zweite Reihe: Die zweite Reihe ist in zwei Teile unterteilt, der erste Teil nimmt 3 Spalten ein, der zweite Teil nimmt 6 Spalten ein und die restlichen 3 Spalten sind nicht ausgefüllt.

Spaltensortierung

Auf der chinesischen Website wird erklärt, dass die Reihenfolge der Spalten einfach durch die Verwendung von .col-md-push-* und .col-md-pull-* geändert werden kann.

Ich habe es per Code implementiert und die Wirkung gesehen, aber ich verstehe diesen Satz immer noch nicht ganz.

Wie Sie sehen, habe ich drei Zeilen definiert.

Die erste Zeile ist in drei gleich große Teile mit jeweils vier Spalten unterteilt. Diese Zeile dient vor allem dem Vergleich mit den folgenden beiden Zeilen.

In der zweiten Zeile gibt es nur ein Element, das zwei Spalten einnimmt. Außerdem wird diesem Element die Stilklasse .col-md-push-4 hinzugefügt. (Das Element, das zwei Spalten einnimmt, wird 4 Spalten nach rechts verschoben, sodass es nun die fünfte und sechste Spalte einnimmt.)

Die dritte Spalte ist in zwei Teile unterteilt. Der erste Teil umfasst sieben Spalten, ist aber leer. Der zweite Teil umfasst fünf Spalten, und diesem Element wird eine Stilklasse .col-md-pull-4 hinzugefügt. Natürlich sollte diese Klasse den entgegengesetzten Effekt der in der vorherigen Zeile hinzugefügten Klasse haben. (Das Element, das 5 Spalten einnimmt, wird vier Spalten nach links verschoben. Ursprünglich begann es in der achten Spalte, jetzt beginnt es in der vierten Spalte.)

Werfen wir nun einen Blick auf die Effektanzeige

Zusammenfassen

In diesem Artikel werden anhand einfachster Fälle die in den Fällen beteiligten Layoutpunkte analysiert. Nachdem ich diesen Artikel gelesen habe, habe ich das Gefühl, ziemlich viel gelernt zu haben, und ich habe das Gefühl, dass ich ihn noch einmal von Anfang an lesen muss. Mein Verständnis einiger Teile ist möglicherweise nicht ganz vollständig. Ich hoffe, dass erfahrene Experten, die es verstehen und gesehen haben, mir helfen können, es zu korrigieren. Vielen Dank im Voraus. Ich fühle mich sehr gut, nachdem ich diesen Artikel geschrieben habe. Ich habe viel gelernt. Natürlich hoffe ich, dass er Ihnen, den Lesern, eine Hilfe sein kann.