Eine kurze Diskussion über adaptive Bildschirme in Bootstrap-Bootstrap-Tutorial-php.cn

Eine kurze Diskussion über adaptive Bildschirme in Bootstrap

青灯夜游

Freigeben： 2021-05-12 11:16:08

nach vorne

4592 Leute haben es durchsucht

In diesem Artikel geht es um adaptive Bildschirme in Bootstrap. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Eine kurze Diskussion über adaptive Bildschirme in Bootstrap

Bootstrap ist ein einfaches, intuitives und leistungsstarkes Front-End-Entwicklungsframework, das auf der Grundlage von HTML.css.javaScript entwickelt wurde und es Webentwicklern ermöglicht, schnell reaktionsfähige Webseiten zu erstellen. [Verwandte Empfehlungen: „Bootstrap-Tutorial“]

bootstrap adaptiv:

Bootstrap unterteilt das Gerät entsprechend der Bildschirmgröße in einen ultrakleinen Bildschirm, einen kleinen Bildschirm, einen mittleren Bildschirm und einen großen Bildschirm und unterteilt den Bildschirm in 12 Spalten Die entsprechende Bildschirmbreite beträgt:

Extra kleiner Bildschirm (Mobiltelefon): 0-768px Entsprechende Einstellungsklasse=col-xs-number
Kleiner Bildschirm (Tablet): 768-992px Entsprechende Einstellungsklasse=col-sm-number
Mittel Bildschirm (Computer):992-1200px Entsprechende Einstellungsklasse=col-md-number
Großer Bildschirm (Computer):1200px-? Entsprechende Einstellungsklasse=col-lg-number

Im Chrome-Browser finden Sie das, wenn die Die Bildschirmbreite wird im Elementfenster geändert. Wenn sie kleiner als 768 ist, ist nur com-xs-12 wirksam.

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

Prinzip: Es handelt sich um den @media only-Bildschirm zur Medienabfrage (Gerät/Browser), um die Breite des Geräts abzufragen

Die unterste Ebene ist basierend auf @media only screen und (min-width: minimaler Wert) und (max-width: maximaler Wert) für das Rendering:

Beispielpaar Hintergründe:

@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;
}
}

Nach dem Login kopieren

Beispiel zwei Paar Elemente auf Blockebene p

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style type="text/css">
div{
float:left;
}
/**小屏0px-768px*/
@media only screen and (min-width:0px) and (max-width:768px){
.sm-12{
width:100%;
	}
}
/**大屏768*/
@media only screen and (min-width:768px){
.lg-6{
width:50%;
	}
}

</style>
<!-- 两个样式不会同时生效 在小屏上sm-12生效, width是100%在大屏上lg-6生效,width50%
css中标签分块级标记和行级标记,div是块级元素 -->
<div class="sm-12 lg-6">div1</div>
<div class="sm-12 lg-6">div2</div>
</body>
</html>

Nach dem Login kopieren

bootstarp integriert und passt sie an
Schritte

1.Führen Sie die Datei „bootstrap.css“ mit dem Link-Tag ein
2. Definieren Sie sie in Bootstrap
1) Das Root-Element muss ein p-Klassenwert sein, der gleich dem Container sein muss
2) Das Wurzelelement muss ein Zeilenelement enthalten und der Klassenwert des Zeilenelements muss gleich row sein
3) Der Wert der in der Zeile enthaltenen Spaltenklasse muss col-*-number sein

Zum Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 根元素必须是div class必须=container -->
<div class="container">
<!-- 根元素必须包含行 class=row -->
<div class="row">
<!-- 行中包含列 -- class=col-*-number-->
<div class="col-xs-12 col-sm-6 col-md-4">div1</div>
<div class="col-xs-12 col-sm-6 col-md-4">div2</div>
<div class="col-xs-12 col-sm-6 col-md-4">div3</div>
</div>
<div class="row"></div>
</div>
</body>
</html>

Nach dem Login kopieren

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über adaptive Bildschirme in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!