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

Question

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 s'il vous plaît expliquer ce qui suit:

1. Comment ce nombre est l'alignement des grilles?
2. Comment utiliser pour utiliser ces nombres?
3. Qu'est-ce que représente réellement?

Answer 1

Ignorer les lettres (x s, sm, md, lg) pour l'instant, Je vais commencer avec les chiffres ...

• les numéros (1-12) représentent une partie de la largeur totale de tout div
• tous divs ar e divisé en 12 colonnes
• donc, col-*-6 enjambe 6 de 12 colonnes (la moitié de la largeur), col-*-12 enjambe 12 de 12 colonnes (la largeur entière), etc

Donc, si vous voulez deux colonnes égales pour enjamber un div, écrire

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

de si vous voulez trois colonnes inégales pour couvrir 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 est toujours égal à 12. Il peut être inférieur à 12, mais méfiez-vous s'il est supérieur à 12, car vos divs incriminés tomberont à la ligne suivante (pas .row, qui est une autre histoire tout à fait).

Vous pouvez également colonnes imbriquer colonnes, (mieux avec une enveloppe .row autour d'eux), tels 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 divs imbriqués couvrent également jusqu'à 12 colonnes de leur div parent. REMARQUE: Étant donné que chaque classe .col possède un remplissage de 15 pixels de chaque côté, vous devez généralement placer des colonnes imbriquées dans un .row, qui a des marges de -15px. 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 demandé l'utilisation de xs, sm, md, lg, mais ils vont de pair donc je ne peux pas m'empêcher de toucher ...

En bref, ils sont utilisés pour définir au cours de laquelle taille de l'écran cette classe doit appliquer:

• xs = écrans supplémentaires petits (téléphones mobiles)
• sm = petits écrans (comprimés)
• md = écrans de taille (certains PC de bureau)
• lg = grands écrans (ordinateurs de bureau restants)

Lire la "Grid Options" chapitre de la documentation Bootstrap officielle pour plus de détails.

Vous devriez habituellement classer un div en utilisant des classes de colonnes multiples de sorte qu'il se comporte différemment en fonction de la taille de l'écran (ce qui est le cœur de ce qui rend sensible bootstrap). Par exemple: une div avec les classes col-xs-6 et col-sm-4 couvrira la moitié de l'écran sur le téléphone portable (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 --> 

NOTE: selon commentaires ci-dessous, les classes de grille pour une taille d'écran donnée appliquer à cette taille d'écran et plus à moins qu'une autre déclaration remplace (ie col-xs-6 col-md-4 travées 6 colonnes sur xset sm, et 4 colonnes sur mdet lg, bien que sm et lg ont jamais été explicitement déclarées)

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

REMARQUE: c'est vraiment très bien si votre .row comprend plus de 12 cols, tant que vous savez comment ils vont réagir. -C'est un problème litigieux, et tout le monde n'est pas d'accord.

Answer 2

Le point principal est la suivante:

col-lg-*col-md-*col-xs-*col-sm définissent le nombre de colonnes qu'il y aura 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 classes col-md-6 et deux col-xs-6 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 rangées superposées), mettez two col-md-6 et deux col-xs-12 dans vos colonnes et comme la somme sera de 24, elles seront empiler automatiquement les uns sur les autres, ou laisser simplement le style xs.

Answer 3

De Twitter Bootstrap documentation:

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

to Read More...

Answer 4

Le système de grille Bootstrap a 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 mises en page plus dynamiques et flexibles.

Astuce: Chaque classe échelles, 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 facile, mais lisez la suite:

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

Les nombres de pixels sont les points d'arrêt, donc par exemple col-xs vise l'élément lorsque la fenêtre est plus petite que 768px (probablement les appareils mobiles) ...

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