Ich bin verwirrt über die verschiedenen Optionen im Twitter-Bootstrap-Raster und wie sie zusammenpassen.
Zunächst können Sie eine gewöhnliche feste container
oder eine haben container-fluid
.
Dann kann entweder eine gewöhnliche row
oder eine flüssige Reihe enthalten sein row-fluid
. Das heißt, Sie können einen festen Behälter mit einer Flüssigkeitsreihe oder eine Behälterflüssigkeit ... mit einer festen Reihe haben?
Darüber hinaus können Sie die "reaktionsschnellen" Medienabfragen einschließen oder nicht.
Ich bin verwirrt darüber, wie diese Dinge interagieren. Beginnen wir jedoch mit einem offensichtlichen Beispiel.
Auf der Beispielseite selbst finden Sie ein Beispiel für ein festes und ein flüssiges Gitter
In meinem Browser auf dieser Beispielseite selbst verhalten sich beide Raster jedoch identisch. Vielleicht, weil die Beispielseite die optionalen reaktionsschnellen Medienabfragen verwendet? Wenn ich in beiden Rasterbeispielen anfange, mein Browserfenster allmählich zu verkleinern, werden die Rasterelemente nicht allmählich schmaler - sobald eine bestimmte (ansprechende) Grenzbreite erreicht ist, rasten sie auf eine kleinere Größe und erneut bei weiteren Grenzbreiten ein. Aber sowohl das gewöhnliche "feste" Beispiel als auch das "flüssige" Beispiel verhalten sich hier genau gleich - was zum Teufel ist der Unterschied?
Antworten:
Wenn Sie sich zwischen fester Breite und Flüssigkeitsbreite entscheiden, müssen Sie an Ihre GESAMTE Seite denken. Im Allgemeinen möchten Sie das eine oder das andere auswählen, aber nicht beide. Die Beispiele, die Sie in Ihrer Frage aufgeführt haben, befinden sich tatsächlich auf derselben Seite mit fester Breite. Mit anderen Worten, die Gerüstseite verwendet ein Layout mit fester Breite. Die festen Raster und Fluid Grid auf dem Baugerüst Seite sind keine Beispiele gemeint sein, sondern die Dokumentation für feste und flüssige Breite Layouts realisieren.
Das richtige Beispiel für eine feste Breite finden Sie hier . Das richtige Beispiel für die Flüssigkeitsbreite finden Sie hier .
Wenn Sie sich das Beispiel mit fester Breite ansehen, sollten Sie nicht sehen, dass sich die Größe des Inhalts ändert, wenn Ihr Browser größer als 960 Pixel ist. Dies ist die maximale (feste) Breite der Seite. Medienabfragen in einem Design mit fester Breite geben die Mindestbreiten für bestimmte Stile an. Sie werden dies in Aktion sehen, wenn Sie Ihr Browserfenster verkleinern und sehen, dass das Layout auf eine andere Größe ausgerichtet wird.
Umgekehrt passt sich das Layout mit flüssiger Breite immer an Ihr Browserfenster an, egal wie breit es wird. Die Medienabfragen geben an, wann sich die Stile ändern, aber die Breite der Container ist immer ein Prozentsatz Ihres Browserfensters (und nicht eine feste Anzahl von Pixeln).
Die "reaktionsschnellen" Medienabfragen sind alle einsatzbereit. Sie müssen sich nur entscheiden, ob Sie ein Layout mit fester Breite oder flüssiger Breite für Ihre Seite verwenden möchten.
Bisher mussten Sie in Bootstrap 2
row-fluid
in einem Flüssigkeitsbehälter undrow
in einem festen Behälter verwenden. Mit der Einführung von Bootstrap 3row-fluid
wurde entfernt, verwenden Sie es nicht mehr .EDIT : Gemäß den Kommentaren einige jsFiddles für:
Diese Geigen sind vollständig Bootstrap-frei und basieren auf reinen CSS-Medienabfragen. Dies macht sie zu einem guten Ausgangspunkt für alle, die bereit sind, ähnliche Lösungen ohne Verwendung von Twitter Bootstrap zu entwickeln.
quelle
responsive
sich sowohl fest als auch flüssig ändert - Sie können sowohl fest als auch flüssig reagieren (oder nicht), oder? Können Sie erklären, wie reaktionsschnell sie jeweils wirken?Interessante Diskussion. Ich habe mir auch diese Frage gestellt. Der Hauptunterschied zwischen flüssig und fest besteht einfach darin, dass das feste Layout eine feste Breite in Bezug auf das gesamte Layout der Website (Ansichtsfenster) hat. Wenn Sie ein Ansichtsfenster mit einer Breite von 960 Pixel haben, hat jede Spalte eine feste Breite, die sich nie ändert.
Das flüssige Layout verhält sich anders. Stellen Sie sich vor, Sie haben die Breite Ihres Hauptlayouts auf 100% Breite eingestellt. Jetzt wird jede Spalte nur auf ihre relative Größe (dh 25%) und ihre Dehnungen berechnet, wenn die Größe des Browsers geändert wird. Anhand Ihres Layoutzwecks können Sie also auswählen, wie sich Ihr Layout verhält.
Hier ist ein guter Artikel über Flüssigkeit vs. Flex .
quelle
Quelle - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Vorteile
Nachteile
quelle
Flüssiges Layout in Bootstrap 3.
Im Gegensatz zu Boostrap 2 verfügt Bootstrap 3 nicht über ein .container-fluid-Mixin, um einen Flüssigkeitsbehälter herzustellen. Der .container ist ein ansprechendes Rasterlayout mit fester Breite. Auf einem großen Bildschirm befinden sich auf beiden Seiten des Webseiteninhalts übermäßige Leerzeichen.
container-fluid
wird wieder in Bootstrap 3.1 hinzugefügtEin flüssiges Rasterlayout verwendet die gesamte Bildschirmbreite und funktioniert besser auf großen Bildschirmen. Es stellt sich heraus, dass es einfach ist, mit Bootstrap 3-Mixins ein flüssiges Rasterlayout zu erstellen. Die folgende Zeile erstellt ein flüssiges, ansprechendes Rasterlayout:
.container-fixed;
Das .container-feste Mixin setzt den Inhalt in die Mitte des Bildschirms und fügt Auffüllungen hinzu. Es wird keine feste Seitenbreite angegeben.
Ein anderer Ansatz ist die Verwendung des CSS-Stils von Eric Flowers
quelle
Sie können dies verwenden - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. schau mal rein .. ich fand das wirklich sehr nützlich. Gute Leistung, sehr geringes Gewicht, alle wichtigen Browser freundlich und flüssig an sich, so dass Sie nicht wirklich Bootstrap für das Grid benötigen.
quelle