Fluides oder festes Rastersystem, im responsiven Design, basierend auf Twitter Bootstrap

Question

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

Zu Beginn kann man entweder einen normalen festen container haben oder einen container-fluid.

Dann kann jeder von ihnen entweder eine normale row oder eine flüssige Zeile, row-fluid, enthalten. Das bedeutet, dass man einen festen Container mit einer flüssigen Zeile haben kann oder ein container-fluid... mit einer festen Zeile?

Dann können zusätzlich die 'responsive' Media Queries enthalten sein oder nicht.

Ich bin verwirrt darüber, wie diese Dinge interagieren. Aber fangen wir mit einem offensichtlichen Beispiel an.

Auf der Beispielseite selbst wird ein Beispiel sowohl für ein festes Grid als auch für ein flüssiges Grid präsentiert.

Allerdings verhalten sich in meinem Browser auf dieser Beispielseite beide Grids identisch. Vielleicht weil die Beispielseite die optionalen responsiven Media Queries verwendet? In beiden Grid-Beispielen, wenn ich langsam das Browserfenster verkleinere, werden die Grid-Elemente nicht schrittweise schmaler - einmal eine bestimmte (responsive) Grenzbreite erreicht ist, springen sie zu einer kleineren Größe, und wieder bei weiteren Grenzbreiten. Aber sowohl das normale 'feste' Beispiel ALS AUCH das 'flüssige' Beispiel verhalten sich hier genau gleich - also wo liegt der Unterschied?

Answer 1

Wenn Sie sich zwischen fester Breite und flüssiger Breite entscheiden, müssen Sie an Ihre GESAMTE Seite denken. Im Allgemeinen möchten Sie sich für eines von beiden entscheiden, aber nicht für beides. Die Beispiele, die Sie in Ihrer Frage aufgelistet haben, befinden sich tatsächlich auf derselben festen Breiten-Seite. Mit anderen Worten, die Gerüstseite verwendet ein Layout mit fester Breite. Das feste Raster und das flüssige Raster auf der Gerüstseite sind keine Beispiele, sondern eher die Dokumentation zur Implementierung von Layouts mit fester und flüssiger Breite.

Das richtige Beispiel für feste Breite finden Sie hier. Das richtige Beispiel für flüssige Breite finden Sie hier.

Beim Betrachten des Beispiels für feste Breite sollten Sie keine Änderungen der Inhaltsgröße feststellen, wenn Ihr Browser breiter als 960px ist. Dies ist die maximale (feste) Breite der Seite. Media Queries in einem Design mit fester Breite legen die Mindestbreiten für bestimmte Styles fest. Sie sehen dies in Aktion, wenn Sie Ihr Browserfenster verkleinern und das Layout zu einer anderen Größe wechseln sehen.

Im Gegensatz dazu wird das Flüssigkeitslayout immer gedehnt, um Ihr Browserfenster anzupassen, unabhängig davon, wie breit es wird. Die Media Queries geben an, wann die Styles geändert werden, aber die Breite der Container ist immer ein Prozentsatz Ihres Browserfensters (anstatt einer festen Anzahl von Pixeln).

Die 'responsive' Media Queries sind bereits einsatzbereit. Sie müssen nur entscheiden, ob Sie ein Layout mit fester Breite oder flüssiger Breite für Ihre Seite verwenden möchten.

Zuvor, in Bootstrap 2, mussten Sie row-fluid innerhalb eines flüssigen Containers und row innerhalb eines festen Containers verwenden. Mit der Einführung von Bootstrap 3 wurde row-fluid entfernt, verwenden Sie es nicht mehr.

BEARBEITEN: Gemäß den Kommentaren einige jsFiddles für:

• flüssiges nicht responsives Layout,
• flüssiges responsives Layout,
• festes nicht responsives Layout,
• festes responsives Layout.

Diese Fiddles sind vollständig frei von Bootstrap, basierend auf reinen CSS-Media Queries, was sie zu einem guten Ausgangspunkt für alle macht, die eine ähnliche Lösung ohne Twitter Bootstrap erstellen möchten.

Answer 2

Interessante Diskussion. Ich habe mir auch diese Frage gestellt. Der Hauptunterschied zwischen Flüssig- und Festlayouts besteht einfach darin, dass das Festlayout eine feste Breite in Bezug auf das gesamte Layout der Website (Viewport) hat. Wenn Sie ein Viewport mit einer Breite von 960px haben, hat jede Spalte eine feste Breite, die sich nie ändert.

Das Flüssiglayout verhält sich anders. Stellen Sie sich vor, Sie haben die Breite Ihres Hauptlayouts auf 100% Breite festgelegt. Jetzt wird jede Spalte nur auf ihre relative Größe (z.B. 25%) berechnet und dehnt sich aus, wenn der Browser vergrößert wird. Je nach Layout-Zweck können Sie auswählen, wie sich Ihr Layout verhält.

Hier ist ein guter Artikel über flüssig vs. flexibel.

Answer 3

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

Pro

• Festbreiten-Layouts sind viel einfacher zu verwenden und einfacher anzupassen in Bezug auf das Design.
• Die Breiten sind für jeden Browser gleich, so gibt es weniger Ärger mit Bildern, Formularen, Videos und anderen Inhalten, die Festbreiten haben.
• Es ist keine min-width oder max-width erforderlich, was sowieso von jedem Browser nicht unterstützt wird.
• Selbst wenn eine Website darauf ausgelegt ist, mit der kleinsten Bildschirmauflösung, 800×600, kompatibel zu sein, wird der Inhalt bei einer größeren Auflösung noch breit genug sein, um leicht lesbar zu sein.

Kontra

• Ein Festbreiten-Layout kann für Benutzer mit größeren Bildschirmauflösungen übermäßigen Weißraum erzeugen, was "göttliche Proportion", das "Drittelungsprinzip", das allgemeine Gleichgewicht und andere Designprinzipien stört.
• Kleinere Bildschirmauflösungen können je nach Breite des Festlayouts eine horizontale Scrollleiste erfordern.
• Nahtlose Texturen, Muster und Bildfortsetzung sind erforderlich, um diejenigen mit größeren Auflösungen anzupassen.
• Festbreiten-Layouts haben im Allgemeinen eine niedrigere Gesamtpunktzahl in Bezug auf die Benutzerfreundlichkeit.

Answer 4

Flüssiges Layout in Bootstrap 3.

Im Gegensatz zu Boostrap 2 verfügt Bootstrap 3 nicht über einen .container-fluid-Mixin, um einen flüssigen Container zu erstellen. Der .container ist ein Gitterlayout mit fester Breite und responsiv. Auf einem großen Bildschirm gibt es auf beiden Seiten des Webseiteninhalts übermäßige weiße Räume.

container-fluid wird in Bootstrap 3.1 wieder hinzugefügt

Ein flüssiges Gitterlayout verwendet die gesamte Bildschirmbreite und funktioniert besser auf großen Bildschirmen. Es stellt sich heraus, dass es einfach ist, ein flüssiges Gitterlayout mit den Mixins von Bootstrap 3 zu erstellen. Die folgende Zeile erstellt ein flüssiges responsives Gitterlayout:

.container-fixed;

Der .container-fixed-Mixin setzt den Inhalt in die Mitte des Bildschirms und fügt Polster hinzu. Es legt keine feste Seitenbreite fest.

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

Answer 5

Sie können dies verwenden - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. schau mal.. Ich fand dieses wirklich sehr nützlich. Gute Leistung, sehr leicht, alle wichtigen Browser-kompatibel und flüssig, so dass Sie Bootstrap nicht wirklich für das Grid benötigen.