Bootstrap Rastersystem

Was ist ein Raster (Grid)?

Aus Wikipedia:

In Grafik-Design, ist das Raster eine Reihe von geraden Linien verwendet, um Inhalte durch die schneidende (vertikal, horizontal) Struktur zu organisieren, bestehend aus (in der Regel zweidimensional). Es ist weit verbreitet in der Gestaltung Print-Design-Layout und Content-Struktur verwendet. In Web-Design ist es eine eine konsistente und effektive Layout mit HTML und CSS Ansatz, um schnell erstellen.

setzen, Web-Design-Raster einfach für die Organisation der Inhalte, so dass die Website einfach zu navigieren, und die Client-Belastung zu reduzieren.

Was ist das Bootstrap-Grid-System (Grid System)?

Bootstrap offizielle Dokumentation auf Grid-System Beschreibung:

Bootstrap enthält eine reaktions das mobile Gerät Priorität nicht fixiert Rastersystem, mit der Zunahme der Größe des Geräts oder Darstellungsfeld entsprechend auf 12 erweitert. Es enthält vordefinierte Klassen für einfache Layout-Optionen, auch zur Erzeugung von mehr semantischen Layouts gemischten Klassen mächtig umfasst.

Lassen Sie uns, wie die obige Aussage zu verstehen. Bootstrap 3 ist ein mobiles Gerät Priorität, in diesem Sinne, Bootstrap-Code für Geräte mit kleinem Bildschirm (wie Mobiltelefon, Tablet), erweitert dann auf Großbildgeräte (wie zB Laptops, Desktop-Computer) auf die Komponenten und das Netz.

Mobil-first-Strategie

• Inhalt
  • Entscheiden Sie, was am wichtigsten ist.
• Layout
  • Priorität geringere Breite ausgelegt.
  • CSS-basierte mobile Geräte ist eine Priorität, Medien-Anfragen auf Tablet-Computer gerichtet sind, Desktop-Computern.
• Progressive Enhancement
  • Mit der Zunahme der Bildschirmgröße und Elemente hinzuzufügen.

Responsive Grid-System mit zunehmender Bildschirm oder Ansichtsfenster (Ansicht) Größe, wird das System automatisch in maximal 12 aufgeteilt werden.

Bootstrap Rastersystem (Grid System) funktioniert

Das Rastersystem durch eine Reihe von Zeilen und Spalten mit Inhalt ein Seitenlayout zu erstellen. Die folgende Liste zeigt die Bootstrap Grid-System ist, wie es funktioniert:

• Row muss in.Behälter Klasse platziert werden,um die richtige Ausrichtung (Alignment) und Polster (Polster) zu erhalten.
• Verwenden Sie Linien eine Reihe von horizontalen Spalten zu erstellen.
• Inhalt wird in der Spalte platziert werden und die Säule kann nur direkt untergeordneten Reihen sein.
• Vordefinierte Raster Klassen wie.row und .col-xs-4,kann verwendet werden , um schnell ein Raster - Layout erstellen. WENIGER gemischte Klasse kann mehr semantische Layouts verwendet werden.
• Säule eine Lücke zwischen dem Inhalt der Säule durch Foulardieren (Padding) zu erstellen. Die Polsterung ist von außen auf die (Rand) Negation.Rows durch, und die letzte Reihe, erste Spalte gibt einen Versatz.
• Das Rastersystem ist durch die Angabe der zwölf Spalten zur Verfügung, die Sie um ein Kreuz zu erstellen möchten. Zum Beispiel drei gleiche Spalten zu erstellen, verwenden Sie drei.col-xs-4.

Medien-Anfragen

Medien-Anfragen sind sehr schick "bedingte CSS-Regeln." Sie gilt nur für einige basierend auf einigen vorbestimmten Kriterien CSS. Wenn diese Voraussetzungen erfüllt sind, dann den entsprechenden Stil anwenden.

Bootstrap Medien Abfragen können Sie auf der Basis der Größe des Ansichtsfenster zeigen und verstecken Inhalt zu bewegen. Die folgenden Medien-Anfragen LESS-Dateien verwendet mit Bootstrap Rastersystem kritische Abgrenzungspunkt Schwelle zu schaffen.

/ * Ultra-kleine Geräte (Mobiltelefone, weniger als 768px) * /
/ * Standardmäßig ist die Bootstrap keine Medienanfragen * /

/ * Kleine Geräte (Tablette, 768px ab) * /
@media (min-width: @ Screen-sm-min) {...}

/ * Medium Geräte (Desktop, 992px ab) * /
@media (min-width: @ screen-md-min) {...}

/ * Großgeräte (große Desktop-Computer, 1200px ab) * /
@media (min-width: @ screen-lg-min) {...}

Wir enthalten manchmalmax-width Medienabfrage in dem Code, der die CSS in einem kleineren Bereich von Bildschirmgrößen beschränkt beeinflussen.

@media (max-width: @ screen-xs-max) {...}
@media (min-width: @ Bildschirm-sm-min) und (max-width: @ Bildschirm-sm-max) {...}
@media (min-width: @ screen-md-min) und (max-width: @ Bildschirm-md-max) {...}
@media (min-width: @ screen-lg-min) {...}

Medien Abfrage hat zwei Teile, zunächst eine Gerätespezifikation, dann eine Größe Regel. Im obigen Fall, legen Sie die folgenden Regeln:

Schauen wir uns diese Zeile Code aussehen:

@media (min-width: @ Bildschirm-sm-min) und (max-width: @ Bildschirm-sm-max) {...}

Für alle mit einemmin-width: @ Bildschirm-sm-min- Geräten, wenn die Breite des Bildschirms ist weniger als@ Bildschirm-sm-max,wird es einige Verarbeitung zu tun.

Rasteroptionen

Die folgende Tabelle fasst zusammen, wie das Bootstrap-Grid-System über mehrere Geräte hinweg arbeiten:

Die Grundstruktur des Rasters

Hier ist die grundlegende Struktur des Bootstrap Raster:

<Div class = "container">
   <Div class = "Zeile">
      <Div class = "col - * - *"> </ div>
      <Div class = "col - * - *"> </ div>      
   </ Div>
   <Div class = "Zeile"> ... </ div>
</ Div>
<Div class = "container"> ....

Lassen Sie ein paar einfache Beispiele, die wir an das Netz aussehen:

• Beispiel: Stack - Ebene
• Beispiel: mittlere und große Anlagen
• Beispiele: Mobiltelefone, Tablet - Computer, Desktop-Computer

Responsive Spalten zurücksetzen

Das folgende Beispiel enthält vier Gitter, aber wir können die Position des Gitters nicht bestimmen, in einem kleinen Gerät Browsing angezeigt.

Um dieses Problem zu lösen, können Sie verwenden.clearfix Klasse und verwenden ansprechende Dienstprogramm zu lösen, wie in den folgenden Beispielen gezeigt:

Browser Größe des Fensters zu sehen, die Änderungen oder die Wirkung auf Ihrem Telefon anzuzeigen.

Offset-Spalte

Der Offset ist eine nützliche Funktion für professionelles Layout. Sie können verwendet werden, um mehr Platz für die Spalte zu machen. ZumBeispiel .col-xs = * Klasse unterstützt keine Offsets, aber sie können einfach sein , indem eine leere Zelle mit der Wirkung zu erzielen.

der Offset auf einem großen Bildschirm zu verwenden, verwenden Sie.col-md-Offset- * Kategorie Um.Linke außerhalb dieser Klassen wäre eine Spalte von der (Rand) erhöht* Spalte, wobei *Bereichvon 1 bis 11 ist.

Im folgenden Beispiel haben wir <div class = "col-md -6"> .. </ div>, werden wir.col-md-Offset-3 - Klassezum Zentrum dieses div verwenden.

Die Ergebnisse sind wie folgt:

Verschachtelte Spalte

Die Vorgabe für Netzschachtelung in den Inhalt, fügen Sie eine neue.row, und innerhalb einer bestehenden Spalte .col-MD- *eine GruppeCOL-MD- *Spalten hinzufügen. Verschachtelte Zeile einen Satz von Spalten enthalten sollte, die die Anzahl der Spalten festlegen können nicht mehr als 12 sein (in der Tat, es ist nicht erforderlich, dass Sie haben 12 zu füllen).

In dem folgenden Beispiel wird das Layout hat zwei Spalten, wird die zweite Spalte in zwei Reihen von vier Felder unterteilt.

Die Ergebnisse sind wie folgt:

Spaltensortierung

Bootstrap Grid-System in ein anderes perfekte Feature ist, dass man leicht eine Spalte in einer Reihenfolge schreiben kann, dann ist die Reihenfolge, in einer anderen Spalte angezeigt wird.

Sie können ganz einfach die Bestellung mit.col-md-Drück gebaut Rasterspalten ändern *und.col-md-Pull- *Klasse, wobei*Bereichvon 1 bis 11 ist.

Im folgenden Beispiel haben wir eine Zwei-Spalten-Layout, linke Spalte ist sehr schmal, als Sidebar. Wir verwenden.col-md-Drück - *und.col-md-Pull- *Klasse die Reihenfolge der zwei Spalten zu tauschen.

Die Ergebnisse sind wie folgt: