Das Raster von Bootstrap4 ist in mehrere Kategorien unterteilt

Die Raster von Bootstrap4 sind in 5 Kategorien unterteilt: 1. „.col“ für alle Geräte; 2. „.col-sm“ für Tablet-Geräte; 3. „.col-md“ für Desktop-Monitore; . „.col-lg“, für große Desktop-Monitore; 5. „.col-xl“, für extra große Desktop-Monitore.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootsrap-Version 4, DELL G3-Computer

Bootstrap bietet ein reaktionsfähiges, mobiles Geräte-First-Fluid-Grid-System (Raster), das sich mit dem Bildschirm oder der Ansicht ändert Wenn die Größe des Ansichtsfensters zunimmt, teilt das System es automatisch in bis zu 12 Spalten auf.

Wir können die Anzahl der Spalten auch nach unseren eigenen Bedürfnissen definieren:

Das Rastersystem von Bootstrap 4 reagiert und die Spalten werden automatisch entsprechend der Bildschirmgröße neu angeordnet.

Das Bootstrap 4-Rastersystem verfügt über die folgenden 5 Klassen:

• .col – für alle Geräte

• .col-sm – Tablet – Bildschirmbreite gleich oder größer als 576px

• . col -md- Desktop-Monitor – Bildschirmbreite gleich oder größer als 768 Pixel)

• .col-lg- großer Desktop-Monitor – Bildschirmbreite gleich oder größer als 992 Pixel)

• .col-xl- extra großer Desktop Monitor – Bildschirmbreite gleich oder größer als 1200 Pixel)

Die folgende Tabelle fasst zusammen, wie das Bootstrap-Rastersystem auf verschiedenen Geräten funktioniert:

Container maximale BreiteKeine 540px.col-sm-.col-xl-Anzahl der Spalten und 12Lückenbreite30px (Jede Seite einer Spalte ist jeweils 15 Pixel groß.) Kann verschachtelt werdenSpaltensortierungJa

	Extra kleine Geräte ≥576px	Desktop-Monitor ≥768px	Großer Desktop-Monitor ≥992px	Extra großer Desktop-Monitor ≥1200px
720px	960px	1140px		Klassenpräfix	.col-
.col-md-	.col-lg-.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

Weitere Informationen zu Bootstrap finden Sie unter:

Bootstrap Basic ! !

Das obige ist der detaillierte Inhalt vonDas Raster von Bootstrap4 ist in mehrere Kategorien unterteilt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!