Fluid- oder Festnetzsystem in reaktionsschnellem Design, basierend auf Twitter Bootstrap

399

Ich bin verwirrt über die verschiedenen Optionen im Twitter-Bootstrap-Raster und wie sie zusammenpassen.

Zunächst können Sie eine gewöhnliche feste containeroder eine haben container-fluid.

Dann kann entweder eine gewöhnliche rowoder 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?

jrochkind
quelle
6
Vielleicht ist dies ein besseres Beispiel für den fließenden Layoutstil?
Cody Gray

Antworten:

442

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-fluidin einem Flüssigkeitsbehälter und rowin einem festen Behälter verwenden. Mit der Einführung von Bootstrap 3 row-fluidwurde 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.

eterps
quelle
1
hmm, okay, die Dokumente schienen mir zu suggerieren, dass Sie Flüssigkeit und Fixes mischen und anpassen könnten, aber ich denke, das ist eine fortgeschrittene Verwendung, für die ich nicht bereit bin. :) Ich verstehe immer noch nicht, wie responsivesich 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?
Jrochkind
8
Das Verwirrende für mich bleibt, dass das Beispiel "richtige feste Breite" die Größe von Spalten ändert, wenn sich das Browserfenster ändert (weil es reagiert?). Und das Beispiel für die richtige Flüssigkeitsbreite auch. Aber ich denke, das Beispiel für die Flüssigkeitsbreite macht es kontinuierlich, und das Beispiel für die Reaktion auf feste Breite macht es in diskreten Sprüngen und erreicht eine maximale Größe? Ist es das? Wie wäre es mit Flüssigkeit ansprechbar oder nicht ansprechbar?
Jrochkind
16
Du hast es. Im Layout mit fester Breite ändern sich die Spalten, wenn das Browserfenster eine in einer Medienabfrage definierte Breite erreicht. Wenn Ihr Fenster also größer als 960 Pixel ist, bleibt es auf seiner maximalen Breite. Wenn Sie Ihren Browser dann auf 959 Pixel verkleinern, wird er auf der Grundlage einer Medienabfrage mit einer maximalen Breite von 768 Pixel an einem neuen Layout ausgerichtet. Da Sie also ein Layout mit fester Breite
anzeigen,
3
Wenn Sie ein Layout mit flüssiger Breite anzeigen, ändern sich die Spaltengrößen immer entsprechend der Breite Ihres Browsers. Das Layout selbst ändert sich ebenfalls entsprechend den Medienabfragen, wie bei einem Layout mit fester Breite.
Eterps
12
Das Wichtigste ist, dass die feste Breite = Pixel und die Flüssigkeitsbreite = Prozent ist. Die Reaktionsfähigkeit ergibt sich aus allen ausgefallenen CSS-Regeln, die in bootstrap-responsive.css definiert sind, und diese Regeln gelten für beide Layouts.
eterps
21

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 .

Lido
quelle
7

Quelle - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Vorteile

  • Layouts mit fester Breite sind viel einfacher zu verwenden und in Bezug auf das Design einfacher anzupassen.
  • Die Breiten sind für jeden Browser gleich, sodass Bilder, Formulare, Videos und andere Inhalte mit fester Breite weniger Probleme verursachen.
  • Es ist keine minimale oder maximale Breite erforderlich, was ohnehin nicht von jedem Browser unterstützt wird.
  • Selbst wenn eine Website mit der kleinsten Bildschirmauflösung (800 × 600) kompatibel ist, ist der Inhalt bei einer größeren Auflösung immer noch breit genug, um gut lesbar zu sein.

Nachteile

  • Ein Layout mit fester Breite kann für Benutzer mit größeren Bildschirmauflösungen zu viel Leerraum erzeugen, wodurch das „göttliche Verhältnis“, die „Drittelregel“, die Gesamtbalance und andere Gestaltungsprinzipien gestört werden.
  • Kleinere Bildschirmauflösungen erfordern möglicherweise eine horizontale Bildlaufleiste, abhängig von der Breite des festen Layouts.
  • Nahtlose Texturen, Muster und Bildfortsetzungen sind erforderlich, um diejenigen mit größeren Auflösungen aufzunehmen.
  • Layouts mit fester Breite weisen im Allgemeinen eine niedrigere Gesamtbewertung auf, wenn es um Benutzerfreundlichkeit geht.
Thilanka De Silva
quelle
6

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ügt

Ein 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

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}
Ying
quelle
2
Ich verstehe nicht, warum die Leute immer wieder sagen, dass "Container-Fluid" in Bootstrap 3 nicht unterstützt wird, solange dies der Fall ist. Ich habe es gerade noch einmal überprüft und in Bootstrap 3.1.0 ist es klar definiert.
Bart
10
Das liegt daran, dass es in 3 entfernt wurde und in 3.1 hinzugefügt wurde .
Steve Klösters
-2

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.

Enthusiast
quelle
1
Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. - Aus Review
piet.t
Ich stimme zu .. aber dies ist kein Verweis auf die Antwort, dies ist ein Link zum Plugin, wo die Dateien heruntergeladen werden können, ich denke, ich kann hier keine Dateien mit Antwort anhängen ..
Enthusiast