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

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?

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:

• flüssiges nicht ansprechendes Layout ,
• flüssiges ansprechendes Layout ,
• festes nicht reagierendes Layout ,
• festes ansprechendes Layout .

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.

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 - 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.

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;
}

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.