Signification des nombres dans "col-md-4", "col-xs-1", "col-lg-2" dans Bootstrap
Je suis confus avec le système de grille 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:
- Comment ce nombre aligne les grilles?
- Comment utiliser ces nombres?
- Qu'est-ce que représente-t-il réellement?
S'applique uniquement à Bootstrap 3.
Ignorer les lettres (x s , sm , md , lg ) pour l'instant , Je vais commencer avec juste 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 colonnes sur 12 (la moitié de la largeur),col-*-12s'étend sur 12 colonnes sur 12 (la largeur totale), etc.
Donc, si vous voulez deux colonnes égales pour couvrir une div, écrivez
<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>
Ou, si vous voulez trois colonnes inégales sur cette 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 totalise toujours 12. Cela peut être inférieur à 12, mais méfiez-vous si vous en avez plus de 12, car vos divs en infraction passeront à la rangée suivante (pas .row, qui est une autre histoire tout à fait).
Vous pouvez également imbriquer des colonnes dans des colonnes , (de préférence avec un wrapper .row 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 div imbriquées s'étend également sur 12 colonnes de leur div parent. REMARQUE: Étant donné que chaque classe .col a un remplissage 15px de chaque côté, vous devez généralement envelopper les colonnes imbriquées dans un .row, qui a des marges de -15px. Cela évite la duplication du remplissage et maintient le contenu aligné entre les classes col imbriquées et non imbriquées.
- Vous n'avez pas spécifiquement posé de question sur l'utilisation de xs, sm, md, lg, mais ils vont de pair, donc je ne peux pas m'empêcher de vous en parler….
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 (bureaux restants)
Lisez le " Options de la grille " de la documentation officielle Bootstrap pour plus de détails.
Vous devriez généralement classer une div en utilisant plusieurs classes de colonne, de sorte qu'elle se comporte différemment en fonction de la taille de l'écran (il s'agit du cœur de la réactivité de bootstrap). Par exemple: une div de classe col-xs-6 et col-sm-4 couvrira la moitié de l'écran du téléphone mobile (xs) et 1/3 de l'écran des 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: Selon le commentaire ci-dessous, les classes de grille pour une taille d'écran donnée s'appliquent à cette taille d'écran et plus grand à moins qu'une autre déclaration ne l'ait annulée (c'est-à-dire que col-xs-6 col-md-4 s'étend sur 6 colonnes sur xs et sm, et sur 4 colonnes on 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, la valeur par défaut sera col-xs-12 (c.-à-d. col-sm-6 est la moitié la largeur sur sm, md et lg écrans, mais pleine largeur sur xs écrans).
NOTE: En fait, c'est très bien si votre .row comprend plus de 12 colonnes, à condition que vous sachiez comment elles vont réagir. C'est une question controversée, et tout le monde n'est pas d'accord.
Le système de grille Bootstrap a quatre classes:
xs (pour les téléphones)
sm (pour les comprimés)
md (pour les ordinateurs de bureau)
lg (pour les plus grands ordinateurs de bureau)Les classes ci-dessus peuvent être combinées pour créer des mises en page plus dynamiques et flexibles.
Astuce: Chaque classe est mise à l'échelle. 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 - signifie colonne moyenne ≥ 992px
col-xs - correspond à la colonne très petite ≥ 768px
Les nombres de pixels sont les points d'arrêt. Ainsi, par exemple, col-xs cible l'élément lorsque la fenêtre est inférieure à 768px (probablement des appareils mobiles). ..
J'ai également créé l'image ci-dessous pour montrer le fonctionnement du système de grille. Dans cet exemple, je les utilise avec 3, comme col-lg-6 pour vous montrer comment le système de grille fonctionne dans la page. Regardez comment lg, md et xs réagissent à la taille de la fenêtre:
Le point principal est le suivant:
col-lg-*col-md-*col-xs-*col-sm définit le nombre de colonnes dans ces différentes tailles d'écran.
Exemple: si vous souhaitez qu'il y ait deux colonnes dans les écrans de bureau et dans les écrans de téléphone, vous devez insérer 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 empilées les unes sur les autres), vous mettez two col-md-6 et deux col-xs-12 dans vos colonnes et parce que sum avoir 24 ans, ils se superposeront automatiquement ou laisseront simplement le style xs.
Depuis Twitter Bootstrap documentation :
- petite grille (≥ 768px) =
.col-sm-*, - grille moyenne (≥ 992 px) =
.col-md-*, - grande grille (≥ 1200px) =
.col-lg-*.
Ici vous allez
col-lg-2: si l'écran est grand ( lg ), alors ce composant prendra l'espace de 2 Les éléments prenant en compte une ligne entière peuvent contenir 12 éléments (vous verrez donc que, sur un grand écran, ce composant occupe 16% de l'espace d'une ligne)
col-lg-6: si l'écran est grand ( lg ), ce composant prendra un espace de 6 Les éléments prenant en compte une ligne entière peuvent 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 supprimée et un seul composant par ligne est affiché.
L'image ci-dessous montre différentes largeurs de taille d'écran:
