Signification des nombres dans «col-md-4», «col-xs-1», «col-lg-2» dans Bootstrap

Je suis confondu avec le système de grille dans le nouveau Bootstrap, en particulier ces classes:

col-lg-*
col-md-*
col-xs-*

(où * représente un certain nombre).

Quelqu'un peut-il expliquer ce qui suit:

1. Comment ce nombre aligne-t-il les grilles?
2. Comment utiliser ces numéros?
3. Que représentent-ils réellement?

S'applique uniquement à Bootstrap 3.

Ignorant les lettres (x s , sm , md , lg ) pour l'instant , je vais commencer par les chiffres ...

• les nombres (1-12) représentent une partie de la largeur totale de tout div
• tous les divs sont divisés en 12 colonnes
• donc, col-*-6s'étend sur 6 des 12 colonnes (la moitié de la largeur), col-*-12s'étend sur 12 des 12 colonnes (toute la largeur), etc.

Donc, si vous voulez que deux colonnes égales s'étendent sur un div, écrivez

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

Ou, si vous voulez que trois colonnes inégales s'étendent sur la même largeur, vous pouvez écrire:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

Vous remarquerez que le nombre de colonnes s'additionne toujours à 12. Il peut être inférieur à douze, mais méfiez-vous s'il est supérieur à 12, car vos divs offensants passeront à la ligne suivante (non .row, ce qui est une autre histoire).

Vous pouvez également imbriquer des colonnes dans des colonnes , (mieux avec un .rowwrapper autour d'elles) telles que:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

Chaque ensemble de divisions imbriquées couvre également jusqu'à 12 colonnes de leur division parent. REMARQUE: étant donné que chaque .colclasse a un remplissage de 15 pixels de chaque côté, vous devez généralement encapsuler les colonnes imbriquées dans un .row, qui a des marges de -15 pixels. Cela évite de dupliquer le remplissage et maintient le contenu aligné entre les classes col imbriquées et non imbriquées.

- Vous n'avez pas spécifiquement posé de questions sur l' xs, sm, md, lgutilisation, mais ils vont de pair, donc je ne peux pas m'empêcher d'y toucher ...

En bref, ils sont utilisés pour définir à quelle taille d'écran cette classe doit s'appliquer:

• xs = très petits écrans (téléphones mobiles)
• sm = petits écrans (tablettes)
• md = écrans moyens (certains ordinateurs de bureau)
• lg = grands écrans (ordinateurs de bureau restants)

Lisez le « Options de la grille » chapitre de la documentation officielle Bootstrap pour plus de détails.

Vous devez généralement classer un div en utilisant plusieurs classes de colonnes afin qu'il se comporte différemment selon la taille de l'écran (c'est le cœur de ce qui rend le bootstrap réactif). par exemple: un div avec des classes col-xs-6et col-sm-4couvrira la moitié de l'écran sur le téléphone mobile (xs) et 1/3 de l'écran sur les tablettes (sm).

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

REMARQUE: comme indiqué ci-dessous, les classes de grille pour une taille d'écran donnée s'appliquent à cette taille d'écran et à une taille supérieure, sauf si une autre déclaration la remplace (c'est-à-dire qu'elle col-xs-6 col-md-4s'étend sur 6 colonnes sur xs etsm et 4 colonnes sur md etlg , même si smet lgn'a jamais été explicitement déclarée)

REMARQUE: si vous ne définissez pas xs, il sera par défaut col-xs-12(c. -à- col-sm-6est la moitié de la largeur sur sm, mdet les lgécrans, mais pleine largeur sur les xsécrans).

REMARQUE: c'est en fait tout à fait bien si votre .rowcomprend plus de 12 cols, tant que vous savez comment ils vont réagir. - C'est une question litigieuse, et tout le monde n'est pas d'accord.

Le système de grille Bootstrap comprend quatre classes:
xs (pour les téléphones)
sm (pour les tablettes)
md (pour les ordinateurs de bureau)
lg (pour les ordinateurs de bureau plus grands)

Les classes ci-dessus peuvent être combinées pour créer des dispositions plus dynamiques et flexibles.

Astuce: Chaque classe évolue, donc si vous souhaitez définir les mêmes largeurs pour xs et sm, il vous suffit de spécifier xs.

OK, la réponse est simple, mais lisez la suite:

col-lg- signifie colonne grande ≥ 1200px
col-md- représente colonne moyenne ≥ 992px
col-xs- représente colonne extra petite≥ 768px

Les nombres de pixels sont les points d'arrêt, donc par exemple, col-xscible l'élément lorsque la fenêtre est inférieure à 768 px (probablement les appareils mobiles) ...

J'ai aussi créé l'image ci - dessous pour montrer comment le fonctionnement du système de grille, dans ce exemples que je les utiliser avec 3, comme col-lg-6pour vous montrer comment fonctionne le système de grille dans la page, regardez comment lg, mdet xssont sensibles à la taille de la fenêtre:

Le point principal est le suivant:

col-lg-* col-md-* col-xs-* col-sm définir le nombre de colonnes dans ces différentes tailles d'écran.

Exemple: si vous voulez qu'il y ait deux colonnes dans les écrans de bureau et dans les écrans de téléphone, vous mettez deux col-md-6et deux col-xs-6classes dans vos colonnes.

Si vous voulez qu'il y ait deux colonnes dans les écrans de bureau et une seule colonne dans les écrans de téléphone (c'est-à-dire deux lignes empilées les unes sur les autres), vous mettez two col-md-6deux col-xs-12dans vos colonnes et parce que la somme sera de 24, elles s'empileront automatiquement sur chacune d'elles. autre, ou tout simplement laisser de côté le xsstyle.

De la documentation Twitter Bootstrap :

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

lire la suite ...

Voici

col-lg-2: si l'écran est grand ( lg ), alors ce composant prendra 2 éléments étant donné que la ligne entière peut contenir 12 éléments (vous verrez donc que sur grand écran, ce composant prend 16% d'espace sur une ligne)

col-lg-6: si l'écran est grand ( lg ), ce composant prendra 6 éléments, car la ligne entière peut contenir 12 éléments - une fois appliqué, vous verrez que le composant a pris la moitié de l'espace disponible dans la ligne.

La règle ci-dessus n'est appliquée que lorsque l'écran est grand. lorsque l'écran est petit, cette règle est ignorée et un seul composant par ligne est affiché.

L'image ci-dessous montre différentes largeurs de taille d'écran: