Cours ⇒ Maîtriser Bootstrap facebook twitter youtube

Le principe d'une grille | Le principe d'une grille


Le principe d'une grille

La grille de Bootstrap comporte 12 colonnes comme. Une grille est découpée en rangées (appelées row, parce que tout est en anglais) et colonnes  col.

Une grille est composée de rangées et de colonnes

 

 

Organisation de la grille

Bootstrap est essentiellement un fichier CSS. Il comporte de nombreuses classes que l'on peut utiliser directement dans les balises HTML.

La première classe à connaître est row, qui représente une rangée. Cette classe établit des marges négatives à droite et à gauche :

 

.row {

  margin-right: -15px;

  margin-left: -15px;

}

 

Il faut ensuite définir le nombre de colonnes pour chaque élément en sachant qu'il y en a au maximum 12. Pour définir le nombre de colonnes utilisées pour chaque élément, on dispose de quatre batteries de 12 classes :

  • col-xs-1 ou col-sm-1 ou col-md-1 ou col-lg-1
  • col-xs-2 ou col-sm-2 ou col-md-2 ou col-lg-2
  • ...
  • col-xs-12 ou col-sm-12 ou col-md-12 ou col-lg-12
  •  

 

Petit  écran

(smart-  phone)

Écran

réduit

(tablette)

Écran

moyen

(desktop)

Grand

écran

(desktop)

Comportement

Redimension

Redimension

Redimension

Empilage

puis      redi- mensionne- ment

Classe

col-xs-*

col-sm-*

col-md-*

col-lg-*

Valeur   de   réfé-

rence

< 768 px

> 768 px

> 992 px

> 1200 px

 

Un petit exemple ?

Pour avoir un élément de 4 colonnes de large accouplé avec un élément de 8 colonnes

de large sur un smartphone, on a :

<div class ="row ">

<div class ="col -xs -4">Largeur 4</div >

<div class ="col -xs -8">Largeur 8</div >

</ div >





>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces