Maison > Article > interface Web > Une brève discussion sur les écrans adaptatifs dans Bootstrap

Une brève discussion sur les écrans adaptatifs dans Bootstrap

青灯夜游avant: 2021-05-11 11:23:234567parcourir

Cet article parlera des écrans adaptatifs dans Bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Bootstrap est un framework de développement front-end simple, intuitif et puissant développé sur la base de HTML.css.javaScript, qui permet aux développeurs Web de créer rapidement des pages Web réactives. [Recommandations associées : "Tutoriel bootstrap"]

bootstrap adaptatif :

Bootstrap divise les appareils en écran ultra-petit, petit écran en fonction de l'écran taille Il existe quatre types d'écran, écran moyen et grand écran, et l'écran est divisé en 12 colonnes. La largeur d'écran correspondante est :

Ultra petit écran (téléphone portable) : 0-768px correspondant. paramètre class=col-xs-number
Petit écran (tablette) : 768-992px paramètre correspondant class=col-sm-number
Écran moyen (ordinateur) : 992-1200px paramètre correspondant class=col-md-number
Grand écran (ordinateur) : 1200px-? Paramètre correspondant class=col-lg-number

Dans le navigateur Chrome, dans la fenêtre des éléments, vous constaterez que lorsque la largeur de l'écran est inférieure que 768, seul com-xs-12 prend effet.

Adaptatif : La page Web s'adapte à différents appareils, en utilisant le framework bootstrap

Principe : Il s'agit d'une requête média (appareil/navigateur) @ écran multimédia uniquement Interrogez la largeur de l'appareil

La couche inférieure est présentée comme écran @media uniquement et (min-width : valeur minimale) et (max-width : valeur maximale) :

Exemple de paire Background:

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

Exemple 2 : Intégrer et adapter l'élément de niveau bloc 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 à celui-ci
Étapes

1. La balise link introduit le fichier bootstrap.css
2. Définir dans bootstrap
1) L'élément racine doit être la valeur de la classe p doit être égale à conteneur
2) L'élément racine doit contenir L'élément ligne et la valeur de la classe de l'élément ligne doivent être égales à la ligne
3) La valeur de la classe colonne contenue dans la ligne doit être col-*-number

Par exemple :

<!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>

Plus de détails sur la programmation Pour en savoir plus, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css chrome bootstrap html class number

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Analyse approfondie des listes déroulantes de sélection multiple et de requête floue dans bootstrap-selectArticle suivant：Analyse approfondie des listes déroulantes de sélection multiple et de requête floue dans bootstrap-select

Articles Liés

Voir plus