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.
