it-swarm.com.de

Fluid oder Fixed Grid System, im Responsive Design, basierend auf Twitter Bootstrap

Ich bin verwirrt über die verschiedenen Optionen in der Tabelle Twitter bootstrap und wie sie zusammenpassen.

Zunächst können Sie einen normalen festen container oder einen container-fluid haben.

Dann kann entweder eine gewöhnliche row oder eine fließende Reihe row-fluid enthalten sein. 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 einbeziehen oder nicht.

Ich bin verwirrt, wie diese Dinge interagieren. Beginnen wir aber mit einem offensichtlichen Beispiel.

Auf der Seite mit den Beispielen selbst finden Sie ein Beispiel für ein festes Gitter und ein flüssiges Gitter

In meinem Browser auf dieser Beispielseite selbst verhalten sich beide Raster jedoch identisch. Vielleicht, weil die Beispielseite die optionalen Antwortmedienabfragen verwendet? Wenn ich in beiden Gitterbeispielen beginne, mein Browserfenster allmählich zu verengen, werden die Gitterelemente nicht erhalten allmählich enger - sobald eine bestimmte (ansprechende) Grenzbreite erreicht ist, rasten sie auf eine kleinere Größe und wieder auf weitere Grenzbreiten ein. Aber sowohl das gewöhnliche "feste" Beispiel als auch das "flüssige" Beispiel verhalten sich hier genau gleich - also was zum Teufel ist der Unterschied?

397
jrochkind

Wenn Sie sich zwischen fester Breite und fließender Breite entscheiden, müssen Sie Ihre GESAMTE Seite berücksichtigen. 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. Das festes Gitter und flüssiges Gitter auf der Gerüstseite sind keine Beispiele, sondern die Dokumentation zur Implementierung von Layouts mit fester und flüssiger Breite.

Das richtige Beispiel für eine feste Breite ist hier . Das richtige Beispiel für die Flüssigkeitsbreite ist hier .

Wenn Sie das Beispiel mit der festen Breite betrachten, sollten Sie nicht sehen, dass sich die Größe des Inhalts ändert, wenn Ihr Browser eine Breite von mehr als 960 Pixel aufweist. Dies ist die maximale (feste) Breite der Seite. Medienabfragen in einem Design mit fester Breite legen die Mindestbreite für bestimmte Stile fest. Sie sehen dies in Aktion, wenn Sie Ihr Browserfenster verkleinern und das Layout auf eine andere Größe einstellen.

Umgekehrt wird das Layout mit der Flüssigkeitsbreite immer so gedehnt, dass es in Ihr Browserfenster passt, 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 keine feste Anzahl von Pixeln).

Die "reaktionsschnellen" Medienanfragen sind alle einsatzbereit. Sie müssen sich nur entscheiden, ob Sie ein Layout mit fester Breite oder fließender Breite für Ihre Seite verwenden möchten.

Bisher mussten Sie in bootstrap 2 row-fluid in einem Flüssigkeitsbehälter und row in einem festen Behälter verwenden. Mit der Einführung von bootstrap 3 wurde row-fluid entfernt, verwende es nicht mehr .

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

Diese Fiddles sind vollständig bootstrapfrei und basieren auf reinen CSS-Medienabfragen. Dies macht sie zu einem guten Ausgangspunkt für alle, die eine ähnliche Lösung ohne Twitter Bootstrap entwickeln möchten.

443
eterps

Interessante Diskussion. Diese Frage habe ich mir auch gestellt. Der Hauptunterschied zwischen flüssig und fest ist einfach, 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 (d. H. 25%) berechnet und dehnt sich aus, wenn die Größe des Browsers geändert wird. Sie können also basierend auf Ihrem Layout-Zweck auswählen, wie sich Ihr Layout verhält.

Hier ist ein guter Artikel über Fluid vs. Flex .

21
Lido

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 Breite ist für jeden Browser gleich, sodass Bilder, Formulare, Videos und andere Inhalte mit fester Breite weniger Probleme bereiten.
  • Es ist weder eine minimale noch eine maximale Breite erforderlich, was nicht von jedem Browser unterstützt wird.
  • Selbst wenn eine Website so gestaltet ist, dass sie 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 zu übermäßigem Weißraum für Benutzer mit größeren Bildschirmauflösungen führen, wodurch die „göttliche Proportion“, die „Drittelregel“, die Gesamtbalance und andere Gestaltungsprinzipien gestört werden.
  • Für kleinere Bildschirmauflösungen ist möglicherweise eine horizontale Bildlaufleiste erforderlich, abhängig von der Breite des festen Layouts.
  • Für größere Auflösungen sind nahtlose Texturen, Muster und Bildfortsetzungen erforderlich.
  • Layouts mit fester Breite weisen in Bezug auf die Benutzerfreundlichkeit im Allgemeinen eine niedrigere Gesamtbewertung auf.
7

Fluid Layout in Bootstrap 3.

Im Gegensatz zu Boostrap 2 verfügt Bootstrap 3 nicht über ein Behälter-Flüssigkeits-Mixin, um einen Flüssigkeitsbehälter herzustellen. Der .container ist ein Rasterlayout mit fester Breite. Auf einem großen Bildschirm befinden sich zu viele Leerzeichen auf beiden Seiten des Webseiteninhalts.

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, ein Fluid Grid-Layout mit Bootstrap 3 Mixins zu erstellen. Die folgende Zeile sorgt für ein flüssigkeitsempfindliches Rasterlayout:

.container-fixed;

Das .container-fixed-Mixin setzt den Inhalt in die Mitte des Bildschirms und fügt Auffüllungen hinzu. Es gibt keine feste Seitenbreite an.

Ein anderer Ansatz ist Eric Flowers 'CSS-Stil

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}
6
Ying