Heim > Artikel > Web-Frontend > Eine kurze Diskussion über adaptive Bildschirme in Bootstrap

Eine kurze Diskussion über adaptive Bildschirme in Bootstrap

青灯夜游nach vorne: 2021-05-11 11:23:234498Durchsuche

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.

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

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>

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>

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!

JavaScript css chrome bootstrap html class number

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Eingehende Analyse der Dropdown-Felder für Mehrfachauswahl und Fuzzy-Abfragen in Bootstrap-SelectNächster Artikel：Eingehende Analyse der Dropdown-Felder für Mehrfachauswahl und Fuzzy-Abfragen in Bootstrap-Select

In Verbindung stehende Artikel

Mehr sehen