Wozu dient das Grid-System von Bootstrap?

Beim Bootstrap besteht die Aufgabe des Rastersystems darin, die Anpassung desselben Seitensatzes an Geräte mit unterschiedlichen Auflösungen zu ermöglichen. Das System unterteilt jede Zeile im Durchschnitt in 12 Raster und gibt dann an, dass dasselbe Element eine andere Anzahl belegen soll von Rastern auf verschiedenen Geräten, wodurch das Seitenlayout für verschiedene Geräte realisiert wird.

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

Wozu dient das Bootstrap-Grid-System? 1. Das Bootstrap-Grid-System: Die Funktion besteht darin Derselbe Satz von Seiten passt sich unterschiedlich an Die Auflösung des Geräts

2. Implementierung des Rastersystems: Teilen Sie jede Zeile in 12 Raster und geben Sie dann an, dass dasselbe Element eine unterschiedliche Anzahl von Rastern auf Mobilgeräten und PC-Geräten einnimmt . Beispiel: Ein Div belegt 4 auf einem Computerraster und belegt 12 Raster auf dem Mobiltelefon.

1. Container definieren: entspricht der Tabelle.

Variiert je nach Gerät (leer lassen)

2.Container-Fluid: 100%

2. Zeile definieren: entspricht tr-Stil: Zeile

3. Definieren Sie die Anzahl der Gitter, die das Element auf verschiedenen Geräten belegt . Stil: col-Gerätecode-Anzahl der Gitter

*Gerätecode:

1.xs: Mobiltelefon mit ultrakleinem Bildschirm (768px): col-xs-12

2.sm: Tablet mit kleinem Bildschirm (>= 768px)

3.md: Desktop-Monitor mit mittlerem Bildschirm (>=992px)

4.lg: Desktop-Monitor mit großem Bildschirm (>=1200px)

**Hinweis: Wenn die Anzahl der Raster in einer Reihe 12 überschreitet , der Überschuss Teilweiser automatischer Zeilenumbruch

**Hinweis: Die definierten Klassenattribute sind aufwärtskompatibel, aber abwärtskompatibel. Wenn die Breite des Geräts kleiner als der Mindestwert des Gerätecodes des von Ihnen festgelegten Rasterklassenattributs ist, eins Das Element füllt standardmäßig ein Leerzeichen aus.

Verwandte Empfehlungen:

Bootstrap-Tutorial

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