La signification de col-xs-*, col-sm-*, col-md-* dans le système CSS bootstrap fence est de sélectionner automatiquement le style de classe correspondant en fonction de la largeur de l'écran d'affichage :
.col-xs- Téléphone mobile ultra petit écran (<768px) (apprentissage recommandé : Tutoriel vidéo Bootstrap)
.col-sm- Tablette petit écran (≥768px)
.col-md- Moniteur de bureau à écran moyen (≥992px)
.col-lg- Moniteur de bureau grand écran (≥1200px)
Tout d'abord, expliquez :
1. ;
2. xs-maxsmall, extra small ; sm-small, small ; lg-large, large
3. , occupant automatiquement chaque rangée de ratio de système de grille de 12 colonnes ;
4. col-xs-*téléphone mobile à écran ultra petit (<768px),
.col-sm-. *Tablette petit écran (≥768px),
.col-md-*Moniteur de bureau à écran moyen (≥992px) (paramètre de grille).
5 Peu importe où il se trouve sur cet écran, le système de grille divisera automatiquement chaque ligne en 12 colonnes col-xs-* et col-sm-* et col-md-* sont suivies de paramètres indiquant le nombre de colonnes occupées par. chaque div dans l'écran actuel.
Par exemple
6. Inversement, si on veut afficher 3 div côte à côte sur le petit écran (12/3 = chacun occupe 4 colonnes), alors col-xs-4 affiche 6 sur le grand écran div ( 12/6 = chacun occupe 2 colonnes), puis col-md-2 de cette manière nous pouvons contrôler la mise en page souhaitée.
Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
