Was bedeutet das in Bootstrap 3-Dokumenten?
Auf dieser Seite der Bootstrap 3-Dokumentation zum Grid-System (in der Grid-Optionstabelle): Ссылка
Es sagt folgendes: Rasterverhalten: Zu jeder Zeit horizontal, Collapsed zum Start, horizontal über Breakpoints
Kann jemand bitte erklären, was das bedeutet, vielleicht sogar mit einem Beispiel?
Danke!
5 Antworten
"Immer horizontal" gilt für extra kleine Spalten ( .col-xs ):
- Egal welche Bildschirmgröße, selbst bei kleinem Bildschirm (zB am Telefon) sind die Spalten immer horizontal (dh bleiben in der gleichen Zeile), solange im Gitter genügend Platz ist (erinnern Sie sich an das 12 Spaltenraster) , col-xs-6 + col-xs-6 passt in diese Zeile, das Hinzufügen einer weiteren Spalte wird unterhalb der ersten Zeile fortgesetzt. Siehe Beispiel unten in einer ~ 900 x 768 Bildschirmgröße:
Codebeispiel:
%Vor% "Collapsed to start, horizontal über Breakpoints" gilt für kleine ( sm ), mittlere ( md ) und große ( lg ) Spaltenklassen:
- Dies bedeutet, dass die Spalten horizontal sind, wenn der Bildschirm groß genug ist. Wenn der Bildschirm jedoch kleiner als ein vordefinierter "Haltepunkt" ist, werden die Spalten vertikal.
Sie können es an den Beispielen in der Dokumentation (auf Ihrem Link) versuchen, indem Sie Ihre Browserbreite reduzieren.
Es ist die schlimmste Definition in der Geschichte!
Definition:
%Vor%Was sie sagen wollen ist
Spaltenbreite 12/12
Definition:
%Vor%Was sie sagen wollen ist
Wenn der Bildschirm eine bestimmte Breite erreicht (Haltepunkt), werden die Spalten zu x / 12 Prozentsätzen, je nach den Klassen, die sonst pro Spalte verwendet werden, bleibt 12/12
Was sie nicht sagen, ist, dass sie ein Wasserfall -aka Cascading-Modell von ccs media queries implementieren:
- Zuerst werden alle Spalten als 12/12 definiert (kollabierte oder mobile erste Annäherung)
- Dann folgen Medienabfragen von kleineren zu höheren Breakpoints:
ist der Bildschirm klein? Regeln für kleine Bildschirme anwenden
ist das Bildschirmmedium? Regeln für mittlere Bildschirme anwenden
ist der Bildschirm groß? Regeln für große Bildschirme anwenden
Wenn Sie in Ihrer Implementierung eines solchen Grid-Systems keine Obergrenze für jede Abfrage definieren, gelten für einen großen Bildschirm ALLE Abfragen, wobei der Gewinner der letzte ist (ein Wasserfall) Modell)!
Natürlich in einem solchen "Unsinn (?)" - ohne Obergrenzen - sollte die nächste Abfrage die Regeln ihres Vorfahren überschreiben, was endlosen doppelten Code bedeutet!
Im Bootstrap gibt es keine obere Grenze in seinen Abfragen, also schreib etwas wie:
%Vor%Wir können 2 gleiche Spalten in Telefonen (& lt; 768) und 2 gestapelte Spalten in kleinen (& gt; 768) Geräten und darüber hinaus sehen.
Aber warum? Weil es für die erste Spalte eine Klasse col-sm-8 gibt, aber für die fehlende Regel in der zweiten Spalte hat das Wasserfallmodell bereits die Breite 6/12 angewendet! (Befolgen Sie die Fragen von Medienabfragen oben: ein kleiner Bildschirm ist sicherlich extra klein, ein Medium ist sicherlich extra klein und klein etc.).
Wenn andererseits der Entwickler Abfragen in beiden Größen (obere und untere) implementiert hätte, wäre die Spalte Nr. 2 ohne entsprechende Klasse undefiniert und das bedeutet, dass 12/12 in der Spalte bleiben würde Mobile-First-Ansatz!
Unter dem Strich müssen Designer weniger Klassen in ihren Rastern angeben, wenn in Medienabfragen keine Obergrenzen vorhanden sind, aber das Verhalten ist nicht so intuitiv!
Wenn Sie die col-xs-Klassen verwenden, ist Ihr Raster auf allen Bildschirmen horizontal, während Sie bei Verwendung der col-sm-, col-md- und col-lg-Klassen horizontal auf Bildschirmbreiten größer als 768px, 992px, 1170px, sonst werden sie zusammengelegt.
Sehen Sie sich zum Beispiel Beispiel: Gestapelt-zu-horizontal auf derselben Seite an und ändern Sie die Größe Browser. Das Raster verwendet die Klasse col-md. Sie werden feststellen, dass das Raster horizontal bleibt, solange die Breite des Darstellungsbereichs & gt; 992px beträgt, unter der es reduziert ist.
Sie sind nicht der Einzige, der verwirrt ist: Ссылка
Ich finde das auch etwas verwirrend. Aus meiner Sicht ist der beste Weg herauszufinden, wie das Grid-System funktioniert, wenn man sich das Beispiel direkt unter dem Tisch anschaut und mit der Größenänderung des Browsers herumspielt. Idealerweise möchten Sie sich auch dieses Beispiel auf Ihrem Smartphone ansehen, wenn Sie eines haben.
Ich denke, die gewählte Antwort ist schlecht angegeben. Und die Bootstrap 3-Dokumentation bezüglich des Grid-Systems ist auch ein wenig verwirrend, wie es gesagt wird. Also:
-
"Immer horizontal" für extra kleine Spalten (col-xs-): Bedeutet, dass, wenn die col-xs- Klasse verwendet wird, die Spalten sein werden in einer Reihe platziert, eine neben der anderen, unabhängig von der Größe der Bildschirm oder das Gerät.
-
"Collapsed um zu beginnen, horizontal über Breakpoints" für den Rest der Klassen (sm, md, lg): Bedeutet, dass, wenn z.B. Die Klasse col-md wird verwendet. Wenn die Größe des Bildschirms kleiner als 992px ist (die untere Grenze der Klasse md), werden die Spalten untereinander platziert (als wären sie Zeilen). Wenn die Größe des Bildschirms größer als 992px ist, werden sie in einer Reihe nebeneinander angeordnet.
Der entscheidende Punkt hierbei ist, dass "horizontal" auf die Art und Weise verweist, in der die Spalten im <row> -Element, NOT ihrer Form positioniert sind.
Tags und Links css twitter-bootstrap twitter-bootstrap-3