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-*sur Twitter Bootstrap?

Mise à jour 2019 ...

La grille Bootstrap 3 se décline en 4 niveaux (ou "points d'arrêt") ...

• Extra petit (pour smartphones .col-xs-*)
• Petit (pour tablettes .col-sm-*)
• Moyen (pour les ordinateurs portables .col-md-*)
• Grand (pour les 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 des requêtes multimédia CSS .

Donc, dans la grille à 12 colonnes de Bootstrap ...

col-sm-3mesure 3 colonnes sur 12 (25%) sur une petite largeur de périphérique typique (> 768 pixels)

col-md-3mesure 3 colonnes sur 12 (25%) sur une largeur moyenne de périphérique (> 992 pixels)

Le niveau plus petit ( xs, smou md) définit également la taille pour les plus grandes largeurs d'écran . Donc, pour la même colonne de taille sur tous les niveaux, définissez simplement la largeur de la plus petite fenêtre ...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> est le même que,

<div class="col-sm-3">..</div>

Des niveaux plus importants sont impliqués. Parce que cela col-sm-3signifie 3 units on sm-and-up, sauf s'il est 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é parlg

Combinez les classes pour utiliser la modification de la largeur des colonnes sur différentes tailles de grille . Cela crée une mise en page réactive.

<div class="col-md-3 col-sm-6">..</div>

Les sm, mdet les lggrilles seront tous « pile » verticalement sur les écrans / fenêtres moins de 768 pixels. C'est là que la xsgrille s'intègre. Les colonnes qui utilisent les col-xs-*classes ne s'empilent pas verticalement et continuent à être réduites sur les plus petits écrans.

Redimensionnez votre navigateur à l' aide de cette démo et vous verrez les effets de mise à l'échelle de la grille.

Bootstrap 4

Dans Bootstrap 4, il y a une nouvelle -xl-taille, voir cette démo . L' -xs-infixe a également été supprimé , donc les plus petites colonnes sont simplement col-1, col-2.. col-12, etc.

col-*- 0 (xs)
col-sm-*- 576px
col-md-*- 768px
col-lg-*- 992px
col-xl-*- 1200px

Démonstration de la grille Bootstrap 4

De plus, Bootstrap 4 inclut de nouvelles colonnes de mise en page automatique . Ceux - ci ont également sensibles (points d' arrêt col, col-sm, col-md, etc ..), mais n'ont pas largeurs définies de%. Par conséquent, les colonnes de mise en page automatique remplissent une largeur égale sur toute la ligne.

Cet article explique plus sur la grille Bootstrap

Les documents bootstrap l' expliquent, mais il m'a fallu un certain temps pour l'obtenir. Cela a plus de sens lorsque je me l'explique de deux manières:

Si vous pensez aux colonnes commençant horizontalement, vous pouvez choisir quand vous voulez qu'elles s’empilent .

Par exemple, si vous commencez par des colonnes: ABC

Vous décidez à quel moment ils doivent s’empiler pour être comme ceci:

UNE

B

C

Si vous choisissez col-lg, les colonnes s'empileront lorsque la largeur est <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'un autre côté, si vous pensez que les colonnes commencent empilées, vous pouvez choisir à quel moment elles deviennent horizontales :

Si vous choisissez col-sm, les colonnes deviendront horizontales lorsque la largeur sera> = 768px.

Si vous choisissez col-md, les colonnes deviendront horizontales lorsque la largeur sera> = 992px.

Si vous choisissez col-lg, les colonnes deviendront horizontales lorsque la largeur est> = 1200 px.

De la documentation Twitter Bootstrap :

• petite grille (≥ 768px) = .col-sm-*,
• grille moyenne (≥ 992px) = .col-md-*,
• grande grille (≥ 1200px) = .col-lg-*.

Je pense que l'aspect déroutant de cela est le fait que BootStrap 3 est un premier système réactif mobile et ne parvient pas à expliquer comment cela affecte la hiérarchie col-xx-n dans cette partie de la documentation Bootstrap. Cela vous fait vous demander ce qui se passe sur les petits appareils si vous choisissez une valeur pour les gros appareils et vous demande s'il est nécessaire de spécifier plusieurs valeurs. (Vous ne le faites pas)

J'essaierais de clarifier cela en déclarant que ... Les types de grain inférieurs (xs, sm) tentent de conserver l'apparence de la disposition sur les écrans plus petits et les types plus grands (md, lg) s'afficheront correctement uniquement sur les écrans plus grands mais envelopperont les colonnes sur les petits appareils. Les valeurs citées dans les exemples précédents se réfèrent au seuil selon lequel le bootstrap dégrade l'apparence pour s'adapter à la zone d'écran disponible.

En pratique, cela signifie que si vous créez les colonnes col-xs-n, elles conserveront leur apparence correcte, même sur de très petits écrans, jusqu'à ce que la fenêtre atteigne une taille si restrictive que la page ne puisse pas s'afficher correctement. Cela devrait signifier que les appareils qui ont une largeur de 768 px ou moins devraient afficher votre tableau tel que vous l'avez conçu plutôt que dégradé (sous forme de colonne unique ou encapsulée). Évidemment, cela dépend toujours du contenu des colonnes et c'est tout. Si la page essaie d'afficher plusieurs colonnes de données volumineuses, côte à côte sur un petit écran, les colonnes s'encapsuleront naturellement de manière horrible si vous n'en avez pas tenu compte. Par conséquent, en fonction des données contenues dans les colonnes, vous pouvez décider du moment auquel la mise en page est sacrifiée pour afficher le contenu de manière adéquate.

Par exemple, si votre page contient trois colonnes col-sm-n, le bootstrap enroulerait les colonnes dans des lignes lorsque la largeur de la page tombe en dessous de 992 pixels. Cela signifie que les données sont toujours visibles mais nécessiteront un défilement vertical pour les afficher. Si vous ne voulez pas que votre mise en page se dégrade, choisissez xs (tant que vos données peuvent être affichées de manière adéquate sur un périphérique de résolution inférieure dans trois colonnes)

Si la position horizontale des données est importante, vous devez essayer de choisir des valeurs de granularité inférieures pour conserver la nature visuelle. Si la position est moins importante mais que la page doit être visible sur tous les appareils, 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 tombe en dessous du seuil xs de 1200px.

Tailles de périphérique et préfixe de classe:

• Téléphones extra petits appareils (<768px) - .col-xs-
• Petits appareils Tablettes (≥768px) - .col-sm-
• Ordinateurs de bureau pour appareils moyens (≥992 pixels) - .col-md-
• Ordinateurs de bureau pour gros appareils (≥1200px) - .col-lg-

Options de grille:

Référence: Grid System

TL; DR

.col-X-Ydes moyens sur la taille de l' écran X et jusqu'à , étirer 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 respectivement les tailles pour smartphone, tablette, ordinateur portable, ordinateur de bureau.

Le point 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: 50% de largeur sur les ordinateurs de bureau, 100% de largeur sur les mobiles, tablettes et ordinateurs portables.

.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 

Un cas particulier: avant d'apprendre le système de grille d'amorçage, assurez-vous que le zoom du navigateur est réglé sur 100% (à cent pour cent). Par exemple: si la résolution d'écran est (1600px x 900px) et le zoom du navigateur est de 175%, alors 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% - éléments placés horizontalement

Zoom Chrome 175%

Navigateur 175% - éléments empilés

Décomplexons Bootstrap!

Remarquez comment le col-sm occupe la largeur de 100% (en d'autres termes, se transforme en nouvelle ligne) ci-dessous 576pxmais pas le col . Vous pouvez remarquer la largeur actuelle en haut au centre en gif.

Voici le code:

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
    </div>
</div>

Bootstrap aligne par défaut toutes les colonnes (col) sur une seule ligne de largeur égale. Dans ce cas, trois coloccuperont 100% / 3 de largeur chacun, quelle que soit la taille de l'écran. Vous pouvez le remarquer en gif.

Maintenant, que se passe-t-il si nous voulons afficher une seule colonne par ligne, c'est-à-dire donner 100% de largeur à chaque colonne mais uniquement pour les écrans plus petits ? Maintenant vient les col-xxcours!

J'ai utilisé col-smcar je voulais diviser les colonnes en lignes distinctes en dessous de 576px. Ces 4 col-xxclasses sont fournies par Bootstrap pour différents appareils d'affichage comme les mobiles, les tablettes, les ordinateurs portables, les grands moniteurs, etc.

Donc, col-smse briserait en dessous de 576px, col-mdse briserait en dessous de 768px, col-lgse briserait en dessous de 992px et col-xlse briserait en dessous de 1200px

Notez qu'il n'y a pas de col-xsclasse dans bootstrap 4.

Cela résume à peu près. Vous pouvez retourner au travail.

Mais il y a un peu plus. Vient maintenant le col-*et col-xx-*pour personnaliser la largeur.

Rappelez-vous dans l'exemple ci-dessus que j'ai mentionné cela colou col-xxprend la même largeur d'affilée. Donc, si nous voulons donner plus de largeur à un spécifique, colnous pouvons le faire.

La ligne de bootstrap est divisée en 12 parties, donc dans l'exemple ci-dessus, il y en avait 3, coldonc chacune prend 12/3 = 4 parties. Vous pouvez considérer ces pièces comme un moyen de mesurer la largeur.

Nous pourrions également écrire cela au format col-*c'est- col-4à- dire comme ceci:

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

Et cela n'aurait fait aucune différence car, par défaut, le bootstrap donne une largeur égale à col(4 + 4 + 4 = 12).

Mais, si nous voulons donner 7 parties au 1er col, 3 parties au 2e colet reposer 2 parties (12-7-3 = 2) au 3e col(7 + 3 + 2 donc le total est 12), nous pouvons simplement faire ceci:

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

et vous pouvez également personnaliser la largeur des col-xx-*classes.

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

À quoi cela ressemble-t-il dans l'action?

Et si la somme de colest supérieure à 12? Ensuite, le colva se déplacer / s'ajuster à la ligne ci-dessous. Oui, il peut y avoir n'importe quel nombre de colonnes pour une ligne!

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

Et si nous voulons 3 colonnes d'affilée pour les grands écrans mais diviser ces colonnes en 2 lignes pour les petits écrans?

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

Vous pouvez jouer ici: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

Je pense que cette image est assez bonne pour mieux comprendre le concept!

pour plus de détails, veuillez consulter le lien ci-dessous:

https://getbootstrap.com/docs/3.4/css/

eh 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

n'afficherait que 2 colonnes d'affilé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), mais selon la première règle de bootstrap, si vous mentionnez

xs-col-2 md-col-4

puis 2 colonnes seraient affichées dans chaque ligne pour les tailles d'écran de xs jusqu'à sm (inclus) et changent quand il obtient la taille suivante, c'est-à-dire pour md jusqu'à lg (inclus) pour une meilleure compréhension des tailles d'écran essayez de les exécuter dans différents modes d'écran dans le mode développeur de Chrome (ctr + shift + i) et essayez différents pixels ou appareils