Was bedeuten „col-md-4', „col-xs-1' und „col-lg-2' im Grid-System von Bootstrap?

Das Grid-System in Bootstrap verstehen: „col-md-4“, „col-xs-1“ und „col-lg-2“ dekodieren

Das Rastersystem von Bootstrap bietet eine flexible und reaktionsfähige Lösung für die Strukturierung von Layouts. Es werden drei Schlüsselklassenpräfixe verwendet: „col-xs“, „col-sm“ und „col-lg“, gefolgt von einer Zahl. Diese Zahlen definieren, wie die Spalten innerhalb des Rasters ausgerichtet werden.

Wie die Zahl Raster ausrichtet

Die Zahl nach dem Präfix gibt die Anzahl der Spalten an, die ein bestimmtes Element außen einnehmen wird von 12 verfügbaren Spalten. Jede Zeile hat insgesamt 12 Spalten, sodass „col--6“ die Hälfte des verfügbaren Platzes einnimmt, während „col--12“ die gesamte Breite einnimmt.

So verwenden Sie die Zahlen

Bei Verwendung dieser Klassen müssen Sie das Präfix basierend auf der beabsichtigten Bildschirmgröße angeben. „xs“ gilt für besonders kleine Bildschirme (Mobiltelefone), „sm“ für kleine Bildschirme (Tablets), „md“ für mittlere Bildschirme (einige Desktops) und „lg“ für große Bildschirme (übrige Desktops).

Um beispielsweise zwei gleiche Spalten innerhalb einer Zeile zu erstellen, würden Sie Folgendes verwenden:

<div>

What the Numbers Repräsentieren

Die Zahlen in den Klassen repräsentieren bestimmte Breiten innerhalb des Rasters. Jede Spalte stellt einen Bruchteil des insgesamt verfügbaren Platzes innerhalb einer Zeile dar:

• "col-*-1": 1/12 der Breite
• "col-*-2" : 2/12 der Breite
• "col-*-3": 3/12 der Breite
• ...
• "col-*-12": 12/12 der Breite

Durch die Kombination dieser Klassen können Sie benutzerdefinierte Layouts erstellen Anpassung an unterschiedliche Bildschirmgrößen und Auflösungen. Denken Sie daran, mehrere Spaltenklassen zu verwenden, um unterschiedliche Verhaltensweisen an unterschiedlichen Haltepunkten anzugeben. Dies macht Bootstrap reaktionsfähig und ermöglicht Ihnen die Erstellung flexibler und anpassungsfähiger Layouts.

Das obige ist der detaillierte Inhalt vonWas bedeuten „col-md-4', „col-xs-1' und „col-lg-2' im Grid-System von Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!