différence bootstrap col-sm col-md

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

La position occupée par ce div sur l'écran est : .col-xs-6 occupe 6 colonnes sur un ultra -petit écran C'est la moitié de l'écran (12/6 colonnes = 2 divs). .col-md-3 occupe 3 colonnes ou 1/4 (12/3 colonnes = 4 divs) dans l'écran de la voie médiane.

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!

css bootstrap class

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn