Wie bestimmen die Zahlen in Bootstrap-Grid-Klassen wie col-md-4, col-xs-1 und col-lg-2 die Elementbreite und Reaktionsfähigkeit?

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

Die Das Bootstrap-Framework führt ein robustes Rastersystem ein, das die Erstellung reaktionsfähiger Layouts erleichtert. Integraler Bestandteil dieses Systems sind Klassen mit dem Format col-*, wobei der Stern eine Zahl darstellt. Diese Zahlen spielen eine entscheidende Rolle bei der Bestimmung, wie Elemente innerhalb eines Rasters ausgerichtet sind und wie sie auf unterschiedliche Bildschirmgrößen reagieren.

Wie richten die Zahlen Raster aus?

Die Die Zahl in einer col-*-Klasse stellt den Teil der verfügbaren Breite dar, den das zugehörige Element einnehmen soll. Die Gesamtbreite einer Rasterzeile ist in 12 Spalten unterteilt, und die Zahl in der Klasse gibt die Anzahl der Spalten an, die das Element umfassen wird.

Spalte-4 bedeutet beispielsweise, dass das Element 4 Spalten umfassen wird oder 1/3 der verfügbaren Breite. Spalte 12 erstreckt sich über die gesamte Breite und nimmt alle 12 Spalten ein.

So verwenden Sie die Zahlen

Um diese Klassen zu verwenden, weisen Sie sie einfach Elementen innerhalb von a zu Rasterreihe. Um beispielsweise zwei Spalten gleicher Breite innerhalb einer Zeile zu erstellen, würden Sie Folgendes verwenden:

<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>

Um drei Spalten ungleicher Breite zu erstellen, könnten Sie Folgendes verwenden:

<div class="col-2">Column 1</div>
<div class="col-6">Column 2</div>
<div class="col-4">Column 3</div>

Was stellen die Zahlen dar?

Über die Zahlen selbst hinaus ist es wichtig, die verwendeten Präfixe zu beachten ihnen. In Bootstrap stellen diese Präfixe unterschiedliche Bildschirmgrößen dar:

• xs: Extra klein (mobile Geräte)
• sm: Klein (Tablets)
• md: Mittel (Desktops). )
• lg: Large (größere Desktops)

Von Indem Sie einem Element mehrere col-*-Klassen zuweisen, können Sie steuern, wie es sich bei jeder dieser Bildschirmgrößen verhält. Beispielsweise bedeutet col-6 col-sm-4, dass das Element auf mobilen Bildschirmen die halbe Breite und auf Tablets und Desktops 1/3 der Breite einnimmt.

Fazit

Das Verständnis der Zahlen und Präfixe in Bootstrap-Rasterklassen ist für die Erstellung reaktionsfähiger und anpassungsfähiger Weblayouts von entscheidender Bedeutung. Durch die effektive Nutzung der col-*-Klassen können Entwickler sicherstellen, dass ihre Designs nahtlos auf unterschiedliche Bildschirmgrößen reagieren und ein konsistentes Benutzererlebnis auf allen Geräten bieten.

Das obige ist der detaillierte Inhalt vonWie bestimmen die Zahlen in Bootstrap-Grid-Klassen wie col-md-4, col-xs-1 und col-lg-2 die Elementbreite und Reaktionsfähigkeit?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!