Wie definieren Zahlen in der Rasternotation von Bootstrap (col-md-4, col-xs-1, col-lg-2) die Elementbreite und -ausrichtung?

Die Grid-Notation in Bootstrap verstehen: col-md-4, col-xs-1, col-lg-2

Bootstrap ist neu Das Rastersystem verwendet eine einfache, aber effektive Notation, um das Layout von Elementen zu steuern: col--, wo Das Sternchen (*) steht für eine Zahl. Diese Notation definiert nicht nur die Breite von Elementen, sondern auch deren Ausrichtung auf verschiedenen Bildschirmgrößen.

Wie Zahlen die Rasterausrichtung definieren

Die Zahlen in den Rasterklassen (col- xs-1, col-lg-2 usw.) bestimmen die Anzahl der „Spalten“, die ein Element im Raster einnehmen wird. Bootstrap teilt den verfügbaren Platz in 12 gleiche Spalten auf, sodass eine col-md-4-Klasse angibt, dass das Element 4 dieser 12 Spalten umfassen soll.

So verwenden Sie die Zahlen

Um diese Zahlen zu verwenden, fügen Sie einfach eine Gitterklasse zum gewünschten Element hinzu. Um beispielsweise eine Spalte zu erstellen, die sich über 4 Spalten auf mittelgroßen Bildschirmen (md) erstreckt, würden Sie die Klasse col-md-4 verwenden. Zur genaueren Steuerung können Sie unterschiedliche Zahlen für unterschiedliche Bildschirmgrößen angeben, z. B. col-xs-1 col-md-4, wodurch das Element auf besonders kleinen Bildschirmen (xs) 1 Spalte und auf mittleren Bildschirmen (md) 4 Spalten einnimmt ).

Was die Zahlen darstellen

Die Zahlen in den Rasterklassen stellen die Breite eines Elements im Verhältnis zur verfügbaren dar Raum. Beispielsweise bedeutet col-xs-1, dass das Element auf besonders kleinen Bildschirmen 1/12 der verfügbaren Breite einnimmt. Ebenso bedeutet col-lg-2, dass das Element auf großen Bildschirmen 2/12 der verfügbaren Breite einnimmt.

Vorrang der Rasterklasse

Es ist wichtig, dieses Raster zu beachten Klassen für eine bestimmte Bildschirmgröße gelten nicht nur für diese Größe, sondern auch für größere Bildschirmgrößen. Beispielsweise gilt die Klasse col-xs-6 für alle Bildschirme von extra klein bis groß. Wenn Sie jedoch eine Rasterklasse für eine größere Bildschirmgröße angeben, wird diese die für eine kleinere Bildschirmgröße überschreiben.

Fazit

Die Bedeutung der Zahlen verstehen in den Klassen col-md-4, col-xs-1 und col-lg-2 ist entscheidend für die effektive Verwaltung des Layouts von Elementen in Bootstrap. Durch die Nutzung dieser Klassen können Sie reaktionsfähige und anpassungsfähige Webdesigns erstellen, die sich nahtlos an verschiedene Bildschirmgrößen anpassen.

Das obige ist der detaillierte Inhalt vonWie definieren Zahlen in der Rasternotation von Bootstrap (col-md-4, col-xs-1, col-lg-2) die Elementbreite und -ausrichtung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!