In der Tat, wenn Sie verwenden Containerund Reihe(die nicht-flüssigen Versionen sind noch immer vorhanden). Anschließend werden alle Inhalte automatisch in der mittleren Spalte mit 1024 Pixeln angezeigt. Wenn Sie dies nicht tun, können Sie die gesamte Seitenbreite verwenden. 

Das Rastersystem migrieren 

Der größte Klassenwechsel ist dann das Netz selbst. 

In Version 2 haben Sie Raster normalerweise auf folgende Weise erstellt: 

 
Inhalt hier
 
Inhalt hier
 

Dieser Code würde Ihnen zwei Container geben, die die 12 Rasterfelder, die alle Layouts hatten, säuberlich ausfüllten (normalerweise eine Seitenleiste).. 

In Version 3 entspricht das Raster der mittleren Ebene jetzt der Version 2 SpanneKlassen, um den vorherigen Code für V3 neu zu schreiben, müssen Sie einfach Folgendes tun: 

 
Inhalt hier
 
Inhalt hier
 

Während Version 2 jedoch nur eine Ebene mit Rastergröße hatte, hat Version 3 jetzt vier Ebenen. Jede Ebene ist auf das erwartete Hauptzielgerät zugeschnitten, von dem Sie erwarten, dass Ihr Endprodukt ausgeführt wird. 

Diese Rastereinheiten werden jetzt wie folgt benannt: 

• Extra kleine Geräte: col-xs- *
• Kleine Geräte: col-sm- *
• Mittlere Geräte: col-md- *
• Große Geräte: col-lg- *

Medienabfragen werden intern für BS3 verwendet, um zu entscheiden, welche der oben genannten Gitterklassen verwendet werden soll, und die verschiedenen Größen werden wie folgt definiert: 

• Extra klein: Anzeigebreite weniger als 768 Pixel 
• Klein: Anzeigebreite größer oder gleich 768 Pixel oder weniger als 992 Pixel 
• Mittel: Anzeigebreite größer oder gleich 992 Pixel oder weniger als 1.200 Pixel 
• Groß: Anzeigebreite größer oder gleich 1.200 Pixel 

Sie können mehrere Versionen Ihres Rasters für BS3 codieren, um zu entscheiden, welcher Typ für das Anzeigen mehrerer Anzeigen verwendet werden soll. Zum Beispiel, wenn Sie Folgendes getan haben: 

 
Inhalt hier
 
Inhalt hier
 
Inhalt hier
 
Inhalt hier
 
Inhalt hier
 
Inhalt hier
 
Inhalt hier
 
Inhalt hier
 

BS3 blendet die Container nach Bedarf ein und aus, abhängig von der Breite der Geräteanzeige und der Bedienung der Medienabfragen. 

Wie bei den vorherigen Versionen des Rastersystems gibt es 12 Spalten, die sich horizontal über alle verschiedenen Größen erstrecken. Unabhängig davon, welche Gittergröße angezeigt wird, werden auf jedem Gerät immer 12 Gitter angezeigt. 

Die Spaltenbreite selbst ändert sich jedoch. Daher müssen Sie möglicherweise den Inhalt in diesen Rastern planen, um die unterschiedlichen Größen zu nutzen. Die Größen für jeden von ihnen sind wie folgt: 

• col-xs- *= Automatische Größenanpassung, keine festen Abmessungen 
• col-sm- *= 60 Pixel 
• col-md- *= 78 Pixel 
• col-lg- *= 95 Pixel 

Der Rinnenrand verbleibt in allen Fällen bei 15 Pixeln auf jeder Seite des Gittercontainers, so dass sich insgesamt eine Rinne von 30 Pixeln ergibt. Diese Größe ist unabhängig von der verwendeten Rastergröße gleich. 

Verschachtelung und Versatz funktionieren wie zuvor, jedoch wie bei den Rastern selbst, durch eine geringfügige Umbenennung der tatsächlich verwendeten Klassen. 

Um einen Versatz anzuwenden, verwenden Sie einfach col-md-offset- *, sich erinnern, das zu ersetzen mdmit xs, sm, oder lgje nach Größe des Rasters. 

Die Verschachtelung erfolgt einfach durch Verschachteln von Containern unter der Kontrolle des col-xx- *Klassen ineinander, wo sie ihre Größe ändern und sich wie in früheren BS-Versionen verhalten werden. 

Die folgenden Beispiele zeigen den richtigen Weg, um beide Techniken zu erreichen: 

 Stufe 1: .col-md-9 
 
 Stufe 2: .col-md-6 
 
 Stufe 2: .col-md-6 
 

In diesem Beispiel erhalten Sie ein Raster, das wie folgt aussieht: 

 .col-md-4 
 
 .col-md-4 .col-md-offset-4 
 
 .col-md-3 .col-md-offset-3 
 
 .col-md-3 .col-md-offset-3 
 
 .col-md-6 .col-md-offset-3 

In diesem Beispiel erhalten Sie ein Layout wie folgt: 

BS3 bringt auch etwas Neues in die Tabelle, wenn es um Versatz und Verschachtelung geht, und das nennt man Spaltenreihenfolge. 

Wenn Sie möchten, dass Ihre Spalten in einer anderen Reihenfolge angezeigt werden, als Sie sie in Ihrem HTML-Dokument definieren, können Sie die neue verwenden col-xx-pull- *und col-xx-push- *Klassen, um Ihre Rasterlayouts in die gewünschte Reihenfolge zu verschieben oder zu verschieben. Zum Beispiel: 

8 Spalten Inhalt
 
4 Spalten Inhalt

Wenn Sie diese in Ihrem Dokument wie erwartet rendern, erhalten Sie Folgendes: 

Wenn Sie jedoch den obigen Code ändern, fügen Sie Push- und Pull-Modifizierer wie folgt hinzu: 

8 Spalten Inhalt
 
4 Spalten Inhalt

Wenn Sie Ihr Dokument rendern, sollten Sie Ihr Layout wie folgt ändern: 

Schließlich, wenn Sie die verwenden Weniger In CSS-Quellversionen von Bootstrap haben Sie die vollständige Kontrolle über die Rastergrößen, indem Sie die folgenden Variablen ändern: 

• @ Rasterspalten: steuert die Anzahl der Raster horizontal (Standard 12) 
• @ gitterrinnenbreite: der gesamte Rand um jedes Raster (standardmäßig 30 Pixel) 
• @ Grid-Float-Haltepunkt: die minimale Größe, unter der wir "extra kleine" Geräte haben (Standard 768 Pixel) 

Nun, da wir das neue Netzsystem unter Kontrolle haben, gibt es sonst noch etwas, das Sie wissen müssen? 

Der klügste von Ihnen könnte denken: „Aber das ist verrückt - mit all diesen verschiedenen Sätzen

 
Inhalt hier
 
Inhalt hier