Was ist Bootstrap adaptiv?

Adaptiv bezieht sich beim Bootstrap auf die Unterteilung des Geräts in vier Typen: ultrakleiner Bildschirm, mittlerer Bildschirm, mittlerer Bildschirm und großer Bildschirm entsprechend der Bildschirmgröße. Die Webseite wird entsprechend den verschiedenen Gerätebildschirmen in 12 Spalten unterteilt. und der Browser teilt sich in Zeilen und Spalten auf, um eine Selbstanpassung zu erreichen. Unabhängig von der Größe des Bildschirms versuchen Sie, die Zeilen nicht umzubrechen, sondern nur horizontal zu skalieren.

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

Was ist Bootstrap adaptiv?

Bootstrap adaptiv:

Bootstrap unterteilt das Gerät in einen ultrakleinen Bildschirm kleiner Bildschirm entsprechend der Bildschirmgröße Es gibt vier Arten von Bildschirmen, mittlerer Bildschirm und großer Bildschirm, und der Bildschirm ist in 12 Spalten unterteilt

Die entsprechende Bildschirmbreite beträgt:

• Extra kleiner Bildschirm (Mobiltelefon): 0-768px Die entsprechende Einstellungsklasse=col-xs-number

• Kleiner Bildschirm (Tablet): 768-992px Entsprechende Einstellungsklasse=col-sm-number

• Mittlerer Bildschirm (Computer): 992-1200px Entsprechende Einstellungsklasse=col -md-number

• Großer Bildschirm (Computer): 1200px-? Entsprechende Einstellung class=col-lg-number

Im Chrome-Browser finden Sie das, wenn die Bildschirmbreite kleiner ist als 768,

nur com-xs-12 ist wirksam.

Adaptiv: Die Webseite passt sich mithilfe des Bootstrap-Frameworks an verschiedene Geräte an.

Prinzip: Es ist der @media-nur-Bildschirm zur Abfrage der Medienbreite (Gerät/Browser), um die Breite des Geräts abzufragen.

Bootstrap ist adaptiv, was unabhängig davon bedeutet Versuchen Sie unabhängig von der Größe, die Zeilen nicht zu umbrechen, sondern skalieren Sie einfach horizontal. Das Rastersystem definiert die Größe des Containers, unterteilt ihn in 12 gleiche Teile und unterteilt den Browser in Zeilen Spalten, um eine Anpassung zu erreichen.

Beispiele sind wie folgt:

@media only screen and (min-width:0px) and (max-width:480px){
body{
background-color:red;
}
}
@media only screen and (min-width:481px) and (max-width:720px){
body{
background-color:green;
}
}
@media only screen and (min-width:721px){
body{
background-color:blue;
}
}

Verwandte Empfehlungen: Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist Bootstrap adaptiv?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!