accueil / manuel mises à jour du site phdc / comment gérer les colonnes

Comment gérer les colonnes

Il faut utiliser quelques balises HTML pour gérer les colonnes.

La largeur du site est divisée en 12 unités. Ces unités s’adaptent automatiquement aux smartphones et aux tablettes.

Pour créer des colonnes, il faut déclarer une row :

<div class="row">
ici mes colonnes
</div>

Les unités s’écrivent comme suit :

  • pour une seule colonne de toute la largeur : un span12 (inutile de créer des colonnes si on en fait qu’une seule qui fait toute la largeur)
  • pour 2 colonnes de taille identique, diviser la largeur en 2, on va mettre deux span6
  • pour 4 colonnes identiques, on utilise quatre span3 (3x4 = 12)
  • pour 1/3 et 2/3, on va donc utiliser un span4 et un span 8
<div class="row">
<div class="span6">
colonne 1 à 50%
</div>
<div class="span6">
colonne 2 à 50%
</div>
</div>
<div class="row">
<div class="span3">
colonne 1 à 25%
</div>
<div class="span3">
colonne 2 à 25%
</div>
<div class="span3">
colonne 3 à 25%
</div>
<div class="span3">
colonne 4 à 25%
</div>
</div>
<div class="row">
<div class="span4">
colonne 1 à 1/3
</div>
<div class="span8">
colonne 2 à 2/3
</div>
</div>

Attention à bien refermer chaque <div> avec </div>

Largeur pour les images dans les colonnes :

  • span2 :
  • span3 : 220px
  • span4 : 300px
  • span6 :
  • span8 : 620px

Une question ? Un projet ? Contactez-nous pour un devis gratuit