Wann sollte das Bootstrap-Grid-System verwendet werden?

Wenn Sie Bootstrap zum Erstellen einer Webseite verwenden und hoffen, dass sich die Webseite an Geräte mit unterschiedlichen Auflösungen anpassen kann, müssen Sie ein Raster verwenden System. (Empfohlenes Lernen: Bootstrap-Video-Tutorial)

Das Rastersystem ist eine Gruppe von Elementen auf Blockebene, die horizontal angeordnet und folgen können Auf dem Bildschirm können Sie den Stil von Elementen auf Blockebene mit unterschiedlichen Auflösungen ändern.

Das Rastersystem wird verwendet, um Seitenlayouts über eine Reihe von Zeilen und Spalten zu erstellen, und Ihre Inhalte können in diesen erstellten Layouts platziert werden.

So funktioniert das Bootstrap-Rastersystem:

„Row“ muss in .container (feste Breite) oder .container-fluid (100 % Breite) enthalten sein, um es angemessen zu machen Ausrichtung und Polsterung.

Erstellen Sie eine Reihe von „Spalten“ in horizontaler Richtung durch „Zeilen“.

Ihr Inhalt sollte in „column“ platziert werden und nur „column“ kann ein direktes untergeordnetes Element von row sein.

Ähnlich wie bei .row vordefinierten Klassen wie .col-xs-4 Die im Bootstrap-Quellcode definierten Mixins können auch zum Erstellen semantischer Layouts verwendet werden, indem „column(). Column)“ das Padding-Attribut einstellt, um eine Lücke (Gutter) zwischen den Spalten zu erstellen ein negativer Wertrand für das .row-Element, um den für das .container-Element festgelegten Auffüllsatz auszugleichen, es ist indirekt „Zeile“. Die enthaltene „Spalte“ gleicht die Auffüllung aus. Der negative Wert von

ist der Grund, warum der Inhalt in Das folgende Beispiel ist in einer Reihe angeordnet.

Spalten im Rastersystem werden durch den Bereich dargestellt, den sie umfassen. Beispielsweise können drei Spalten gleicher Breite mit drei .col-xs-4 erstellt werden Bei mehr als 12 „Spalten“ werden die Elemente der zusätzlichen „Spalten“ als Ganzes in einer anderen Zeile angeordnet.

Gate-Klassen gelten für Geräte mit Bildschirmbreiten größer oder gleich der Haltepunktgröße. und Rasterklassen werden für Geräte mit kleinem Bildschirm überschrieben. Daher gelten alle .col-md-*-Rasterklassen, die auf ein Element angewendet werden, für Geräte mit Bildschirmbreiten, die größer oder gleich der Haltepunktgröße sind, und überschreiben die Rasterklasse für Geräte mit kleinem Bildschirm. Die Anwendung von .col-lg-* auf das Element wirkt sich daher nicht auf Geräte mit großem Bildschirm aus. Weitere technische Artikel zu Bootstrap finden Sie in der Spalte

Bootstrap-Tutorial

lernen!

Das obige ist der detaillierte Inhalt vonWann sollte das Bootstrap-Grid-System verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!