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

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

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

(où * représente un nombre).

Quelqu’un peut-il s’il vous plaît expliquer ce qui suit:

  1. Comment ce nombre aligne les grids?
  2. Comment utiliser ces chiffres?
  3. Qu’est-ce qu’ils représentent réellement?

Ignorant les lettres (x s , sm , md , lg ) pour le moment , je commencerai par les chiffres …

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

Donc, si vous voulez deux colonnes égales pour couvrir un div, écrivez

 
Column 1
Column 2

De si vous voulez trois colonnes inégales pour couvrir cette même largeur, vous pouvez écrire:

 
Column 1
Column 2
Column 3

Vous remarquerez que le nombre de colonnes est toujours égal à 12. Il peut être inférieur à douze, mais méfiez-vous si plus de 12, car vos divs incriminés tomberont à la ligne suivante (pas .row , ce qui est une autre histoire) .

Vous pouvez également imbriquer des colonnes dans les colonnes (mieux avec un wrapper .row ) telles que:

 
Column 1-a
Column 1-b
Column 2-a
Column 2-b

Chaque ensemble de div nesteds couvre également jusqu’à 12 colonnes de leur div parent. REMARQUE: Chaque classe .col ayant un remplissage de 15px de chaque côté, vous devez généralement envelopper les colonnes nestedes dans un .row , dont les marges sont de -15px. Cela évite de dupliquer le remplissage et conserve le contenu aligné entre les classes de col nestedes et non nestedes.

– Vous ne vous êtes pas spécifiquement renseigné sur l’utilisation de xs, sm, md, lg , mais ils vont de pair, alors je ne peux pas m’empêcher de le toucher …

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

  • xs = petits écrans supplémentaires (téléphones portables)
  • sm = petits écrans (tablettes)
  • md = écrans moyens (certains ordinateurs de bureau)
  • lg = grands écrans (bureaux restants)

Lisez le chapitre ” Options de grid ” de la documentation officielle Bootstrap pour plus de détails.

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

 
Column 1
Column 2

REMARQUE: selon les commentaires ci-dessous, les classes de grid pour une taille d’écran donnée s’appliquent à cette taille d’écran et sont plus grandes à moins qu’une autre déclaration ne la remplace ( col-xs-6 col-md-4 couvre 6 colonnes sur xs et sm et 4 colonnes sur md et lg , même si sm et lg n’ont jamais été explicitement déclarés)

REMARQUE: si vous ne définissez pas xs , il utilisera par défaut col-xs-12 (c. col-sm-6 d. col-sm-6 est deux fois moins large sur les écrans sm , md et lg , mais sur les écrans xs ).

REMARQUE: en fait, cela ne .row si votre .row comprend plus de 12 colonnes, à condition que vous .row comment elles vont réagir. C’est une question controversée et tout le monde n’est pas d’accord.

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

Les classes ci-dessus peuvent être combinées pour créer des mises en page plus dynamics et plus 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 facile, mais lisez la suite:

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

Les nombres de pixels sont les points d’arrêt, par exemple col-xs cible l’élément lorsque la fenêtre est inférieure à 768px (périphériques mobiles probables) …

J’ai aussi créé l’image ci-dessous pour montrer comment fonctionne le système de grid, dans cet exemple je les utilise avec 3, comme col-lg-6 pour vous montrer comment fonctionne le système de grid dans la page, regardez comment lg , md et xs sont sensible à la taille de la fenêtre:

Système de grille bootstrap, col - * - 6

De la documentation Twitter Bootstrap :

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

pour en savoir plus …

Le point principal est le suivant:

col-lg-* col-md-* col-xs-* col-sm définir combien de colonnes 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 devez placer deux classes col-md-6 et deux classes 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.-à-d. Deux lignes superposées), vous mettez two col-md-6 colonnes two col-md-6 et deux col-xs-12 sera 24 ils s’emstackront les uns sur les autres, ou laisseront simplement le style xs .

Voici

col-lg-2: si l’écran est grand ( lg ) alors ce composant prendra de la place pour 2 éléments en considérant que la ligne entière peut contenir 12 éléments (vous verrez donc que sur grand écran ce composant prend 16% d’espace)

col-lg-6: si l’écran est grand ( lg ), ce composant prendra l’espace de 6 éléments, sachant qu’une ligne entière peut contenir 12 éléments.

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

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

définitions de taille d'écran