Quelle est la différence entre col-lg- *, col-md- * et col-sm- * dans Bootstrap?
Quelle est la différence entre col-lg-*, col-md-* et col-sm-* dans Twitter Bootstrap?
Mise à jour 2018 ...
La grille Bootstrap 3 se présente sous 4 niveaux (ou "points d'arrêt") ...
- Très petit (pour les smartphones
.col-xs-*) - Petit (pour les tablettes
.col-sm-*) - Moyen (pour les ordinateurs portables
.col-md-*) - Large (pour ordinateurs portables/ordinateurs de bureau
.col-lg-*).
Ces tailles de grille vous permettent de contrôler le comportement de la grille sur différentes largeurs. Les différents niveaux sont contrôlés par les requêtes CSS media .
Donc, dans la grille de 12 colonnes de Bootstrap ...
col-sm-3 a une largeur de 3 colonnes sur 12 (25%) sur une largeur de périphérique typique petite (> 768 pixels)
col-md-3 a une largeur de 3 colonnes sur 12 (25%) sur une largeur de périphérique typique moyenne (> 992 pixels)
Le niveau le plus petit (xs, sm ou md) définit également la taille pour des largeurs d'écran plus grandes. Ainsi, pour la colonne identique taille sur tous les niveaux, il suffit de définir la largeur de la plus petite fenêtre ...
<div class="col-lg-3 col-md-3 col-sm-3">..</div> est identique à,
<div class="col-sm-3">..</div>
Les niveaux supérieurs sont impliqués. Parce que col-sm-3 signifie 3 units on sm-and-up, à moins que ce ne soit spécifiquement remplacé par un niveau supérieur qui utilise une taille différente.
xs (par défaut)> remplacé par sm> remplacé par md> remplacé par lg
Combine les classes à utiliser modifient la largeur des colonnes sur différent tailles de grille. Cela crée une disposition sensible.
<div class="col-md-3 col-sm-6">..</div>
Les grilles sm, md et lg vont toutes "s'empiler" verticalement sur les écrans/fenêtres de moins de 768 pixels. C’est là que la grille xs s’intègre. Les colonnes qui utilisent les classes col-xs-* vont pas s’empiler verticalement et continuer à être réduites sur les plus petits écrans.
Redimensionnez votre navigateur en utilisant cette démo et vous verrez les effets de redimensionnement de la grille.
Dans Bootstrap 4, il existe une nouvelle taille -xl-, voir cette démo . De plus, l'infixe -xs- a été supprimé, les plus petites colonnes sont donc simplement col-1, col-2 .. col-12, etc.
col-* - 0 (xs)col-sm-* - 576pxcol-md-* - 768pxcol-lg-* - 992pxcol-xl-* - 1200px
En outre, cet article explique plus d'informations sur la grille Bootstrap
Le bootstrap docs do l'explique, mais il m'a fallu tout un temps pour l'obtenir. Cela a plus de sens quand je me l'explique de deux manières:
Si vous pensez que les colonnes commencent horizontalement, vous pouvez choisir quand vous voulez qu'elles empilent.
Par exemple, si vous commencez par les colonnes: A B C
Vous décidez quand doivent-ils s'empiler pour être comme ceci:
UNE
B
C
Si vous choisissez col-lg, les colonnes s'empileront lorsque la largeur sera <1200px.
Si vous choisissez col-md, les colonnes s'empileront lorsque la largeur est <992px.
Si vous choisissez col-sm, les colonnes s'empileront lorsque la largeur est <768px.
Si vous choisissez col-xs, les colonnes ne s'empileront jamais.
D'autre part, si vous pensez aux colonnes qui débutent empilées, vous pouvez choisir à quel moment elles deviennent horizontales:
Si vous choisissez col-sm, les colonnes deviennent horizontales lorsque la largeur est> = 768px.
Si vous choisissez col-md, les colonnes deviennent horizontales lorsque la largeur est> = 992px.
Si vous choisissez col-lg, les colonnes deviennent horizontales lorsque la largeur est> = 1200px.
De Documentation de Twitter sur Bootstrap :
- petite grille (≥ 768px) =
.col-sm-*, - grille moyenne (≥ 992px) =
.col-md-*, - grande grille (≥ 1200px) =
.col-lg-*.
Je pense que l’aspect confus, c’est que BootStrap 3 est un premier système réactif mobile et n’explique pas en quoi cela affecte la hiérarchie col-xx-n dans cette partie de la documentation Bootstrap. Cela vous amène à vous demander ce qui se passe sur les plus petits appareils si vous choisissez une valeur pour les plus grands appareils et à vous demander s'il est nécessaire de spécifier plusieurs valeurs. (Vous ne)
J'essaierais de clarifier ceci en indiquant que ........ Les types de grain inférieurs (xs, sm) tentent de conserver l'apparence de la présentation sur des écrans plus petits et les types plus grands (md, lg) s'afficheront correctement uniquement sur des écrans plus grands petits appareils. Les valeurs citées dans les exemples précédents se réfèrent au seuil en tant que bootstrap dégrade l'apparence pour correspondre au parc d'écran disponible.
En pratique, cela signifie que si vous créez les colonnes col-xs-n, elles conserveront une apparence correcte, même sur de très petits écrans, jusqu'à ce que la taille de la fenêtre atteigne une taille si restrictive que la page ne puisse pas être affichée correctement. Cela devrait signifier que les périphériques d’une largeur maximale de 768 pixels doivent afficher votre table telle que vous l’avez conçue plutôt que sous forme dégradée (sous forme de colonne simple ou encapsulée). Évidemment, cela dépend toujours du contenu des colonnes et c'est tout le problème. Si la page tente d’afficher plusieurs colonnes de données volumineuses côte à côte sur un petit écran, les colonnes s’enrouleront naturellement d’une manière horrible si vous n’en avez pas rendu compte. Par conséquent, en fonction des données contenues dans les colonnes, vous pouvez décider du point auquel la mise en page est sacrifiée pour afficher le contenu correctement.
par exemple. Si votre page contient trois colonnes col-sm-n, bootstrap encapsulera les colonnes en lignes lorsque la largeur de la page sera inférieure à 992 pixels. Cela signifie que les données sont toujours visibles mais qu’elles devront être défilées verticalement. Si vous ne voulez pas que votre mise en page se dégrade, choisissez xs (à condition que vos données puissent être correctement affichées sur un périphérique de résolution inférieure sur trois colonnes).
Si la position horizontale des données est importante, essayez de choisir des valeurs de granularité plus faibles pour conserver la nature visuelle. Si la position est moins importante mais que la page doit être visible sur tous les périphériques, une valeur plus élevée doit être utilisée.
Si vous choisissez col-lg-n, les colonnes s'afficheront correctement jusqu'à ce que la largeur de l'écran passe sous le seuil xs de 1200px.
Tailles du périphérique et préfixe de classe:
- Extra petits appareils Téléphones (<768px) -
.col-xs- - Tablettes pour petits appareils (≥768px) -
.col-sm- - Appareils de bureau moyens (≥992px) -
.col-md- - Gros ordinateurs de bureau (≥1200px) -
.col-lg-
Options de grille:
Référence: Système de grille
.col-xs-$ Extra Small Phones Less than 768px
.col-sm-$ Small Devices Tablets 768px and Up
.col-md-$ Medium Devices Desktops 992px and Up
.col-lg-$ Large Devices Large Desktops 1200px and Up
TL; DR
.col-X-Y signifie sur les tailles d'écran X et suivantes, étire cet élément pour remplir Y colonnes.
Bootstrap fournit une grille de 12 colonnes par .row, donc Y = 3 signifie largeur = 25%.
xs, sm, md, lg sont les tailles pour smartphone, tablette, ordinateur portable, ordinateur de bureau, respectivement.
L'intérêt de spécifier différentes largeurs sur différentes tailles d'écran est de vous permettre d'agrandir les choses sur des écrans plus petits.
Exemple
<div class="col-lg-6 col-xs-12">
Signification: largeur de 50% sur les ordinateurs de bureau, largeur de 100% sur mobile, tablette et ordinateur portable.
Un cas particulier: avant d’apprendre le système de grille d’amorçage, assurez-vous que le zoom du navigateur est défini sur 100% (cent pour cent). Par exemple: Si la résolution de l'écran est (1600px x 900px) et le zoom du navigateur est de 175%, les éléments "bootstrap-ped" seront empilés.
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">class="col-lg-4"</div>
<div class="col-lg-4">class="col-lg-4"</div>
</div>
</div>
Zoom Chrome 100%
Navigateur 100 pour cent - éléments placés horizontalement
Zoom Chrome 175%
bien il est utilisé pour dire à bootstrap combien de colonnes doivent être placées dans une rangée en fonction de la taille de l'écran
col-xs-2
afficherait seulement 2 colonnes dans une rangée dans un écran extra petit (xs), de la même manière que sm définit un petit écran, md (taille moyenne), lg (grande taille), si vous mentionnez
xs-col-2 md-col-4
ensuite, 2 colonnes apparaîtront dans chaque ligne pour les tailles d'écran allant de xs à sm (inclus) et changeront lorsque la taille suivante sera atteinte, par exemple pour md jusqu'à lg (inclus) modes d'écran dans le mode développeur de chrome (ctr + shift + i) et essayez divers pixels ou périphériques