Gibt es ein Rasterlayout im Bootstrap?

In Bootstrap gibt es ein Rasterlayout. Unter Rasterlayout versteht man die Aufteilung einer Zeile in 12 Raster und die Zuweisung von 12 Rastern zu verschiedenen div-Elementen für das Layout. Die Anzahl der Spalten wird zum Festlegen verwendet Die Breite der Spalten und das modulare Seitenlayout werden durch die Anzahl der Spalten definiert.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 5, DELL G3-Computer

Gibt es ein Rasterlayout im Bootstrap?

1 . Was ist ein Rasterlayout?

In der Vergangenheit wurde das Tabellenlayout zum Erstellen von Webseitenlayouts verwendet. Die Webseiten wurden durch Teilen der Tabellen in große und kleine Tabellen unterteilt und anschließend wurden Elemente aus den Tabellen ausgefüllt. Später entwickelte sich daraus das div+css-Layout. Float über div+css. float:right und float:left Layout.

Jetzt verwendet Bootstrap das Rasterlayout. Vereinfacht ausgedrückt ist eine Zeile in 12 Raster unterteilt. Weisen Sie für das Layout 12 Raster verschiedenen DIV-Elementen zu.

Rasterlayout in Bootstrap eingeführt, das die Seite in ein tabellenartiges Layout unterteilt.

• Jede Zeile besteht aus 12 Spalten, und die Breite der Spalte kann durch Festlegen der Anzahl der von der Spalte belegten Spalten festgelegt werden

• Unterstützt responsives Layout mit 5 responsiven Größen, die unterschiedlichen Gerätebreiten entsprechen

• Verwenden Sie das Flexbox-Flow-Layout, um das Seitenlayout zu implementieren

• Verwenden Sie Divs, um das Layout von Containern, Zeilen und Spalten zu implementieren
2. Wie implementiert man ein Rasterlayout?

Zuallererst gibt es viele Möglichkeiten, Bootstrap, Webpack-Laden oder CND-Referenzen usw. zu verwenden. Ich habe Version 3.37 direkt vom CDN auf meinen lokalen Computer heruntergeladen. Verweisen Sie dann über das Link-Tag darauf. Dies ähnelt dem Verweisen auf Jquery.

Zweitens weisen Sie das Raster entsprechend dem Layout zu. Angenommen, Sie möchten ein großes horizontales Layout mit drei Spalten implementieren. Ordnen Sie dann jedem DIV 12/3=4 Gitter zu.

Wenn die drei Spalten ungleich sind, gibt es links etwa 3 Gitter, in der Mitte 4 und rechts 4. Spezifische Operationen:

Zuerst Ordnen Sie ein Container-Div an, um das Raster zu speichern, fügen Sie die Containerklasse zum Div hinzu, um den Container zu implementieren

Fügen Sie die Zeilenklasse zu den untergeordneten Elementen hinzu, um das Zeilenlayout zu implementieren, und verwenden Sie col-*, um das Spaltenlayout zu implementieren
Wenn der Klassenname „Container-Fluid“ lautet, beträgt die standardmäßig belegte Breite 100 % und belegt die gesamte Seite.
Wenn bei Verwendung von col- die Größe nicht festgelegt ist, wird die Breite standardmäßig intelligent in gleiche Teile aufgeteilt , und wenn die Größe von * festgelegt ist, wird der Seitenbereich proportional aufgeteilt
Aber die Größe von * in derselben Zeile darf 12 nicht überschreiten, sie kann kleiner als 12 sein und es wird Leerzeichen geben Wenn der Wert 12 überschreitet, wird der überschüssige Teil in die nächste Zeile eingefügt , col-sm-1, col-xs-1, die jeweils einem großen Bildschirm (groß) und einem mittleren Bildschirm (middl) entsprechen, einem kleinen Bildschirm (klein) und einem extrem kleinen Bildschirm (xs). Darunter bedeutet col Spalte, die Mitte ist die Abkürzung der Größe und die letzte ist die dem Div zugewiesene Rastergröße (im Beispiel belegt sie 1/12)

• Verwandte Empfehlungen:

  Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonGibt es ein Rasterlayout im Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!