Qu'est-ce que le bootstrap adaptatif

Dans bootstrap, adaptatif fait référence à la division de l'appareil en quatre types : écran ultra-petit, écran moyen, écran moyen et grand écran en fonction de la taille de l'écran. La page Web sera divisée en 12 colonnes en fonction des différents écrans de l'appareil. et le navigateur divisera en lignes et en colonnes pour réaliser l'auto-adaptation ; quelle que soit la taille de l'écran, essayez de ne pas envelopper les lignes, mettez simplement à l'échelle horizontalement.

L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 5, ordinateur DELL G3

Qu'est-ce que le bootstrap adaptatif ? petit écran selon la taille de l'écran 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 :

Extra petit écran (téléphone portable) : 0-768px Le paramètre correspondant 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, vous constaterez dans la fenêtre des éléments que lorsque la largeur de l'écran est inférieure à 768,

• seul com-xs-12 prend effet.

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

Principe : c'est l'écran de requête multimédia (appareil/navigateur) @media uniquement pour interroger la largeur de l'appareil

bootstrap est adaptatif signifie que peu importe ; de l'écran Quelle que soit la taille, essayez de ne pas envelopper les lignes, mettez simplement à l'échelle horizontalement. Bootstrap est adaptatif via le système de grille qui définit la taille du conteneur, le divise en 12 parties égales et divise le navigateur en lignes et en lignes. colonnes pour réaliser l’adaptation.

Les exemples sont les suivants :

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

Recommandations associées :

Tutoriel bootstrap

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!