La grille bootstrap

L’organisation spatiale des pages web est l’une des premières préoccupations lorsque l’on crée un site web. Prévoit-on une bannière ? Faut-il un espace pour un menu à gauche ou en haut ? Y aura-t-il des blocs sur un des côtés pour recevoir certaines fonctionnalités comme la connexion ou des infos ? Faut-il prévoir un bas de page ?

Bootstrap ne répond évidemment pas à ces questions, mais il peut grandement vous faciliter la tâche, avec son système de grille, pour obtenir le résultat que vous souhaitez.

Petite visite guidée…

Présentation

Le principe d’une grille

Une grille est tout simplement un découpage en cellules de mêmes dimensions (voir figure suivante).

 

Une grille
Une grille

 

On peut alors décider d’organiser du contenu en utilisant pour chaque élément une ou plusieurs cellules, comme à la figure suivante.

 

On peut placer des éléments sur la grille
On peut placer des éléments sur la grille

 

La grille de Bootstrap comporte 12 colonnes comme dans l’illustration précédente. Vous commencez sans doute à comprendre l’utilité de cette organisation.

Terminologie

Une grille est découpée en rangées (appelées row, parce que tout est en anglais) et colonnes (col), comme à la figure suivante.

 

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

 

La grille de Bootstrap

La grille de Bootstrap n’est pas aussi idéale que celle présentée précédemment. Le découpage en colonnes est tout simplement une division en pourcentage de la largeur de la fenêtre de visualisation et correspond donc à ce qu’on vient de voir. En revanche, il n’en est pas vraiment de même pour les rangées. Ces dernières ont la hauteur de leur contenu (voir figure suivante).

 

Les rangées ont la hauteur de leur contenu
Les rangées ont la hauteur de leur contenu

 

Moralité, une rangée prend la hauteur du plus gros élément qu’elle contient. Puisque la largeur des colonnes est contrainte, le flux des données s’écoule verticalement, ce qui est un comportement HTML classique. Il faudra en tenir compte lors de la mise en page.

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

Pourquoi 4 sortes de classes pour les colonnes ?

Bootstrap est « responsive », ce qui veut dire qu’il s’adapte à la taille de l’écran.
Il permet une visualisation aussi bien sur un écran géant que sur un smartphone.
Mais que se passe-t-il pour les éléments d’une page web lorsque la fenêtre diminue ou s’élargit ?
On peut envisager deux hypothèses : les éléments se redimensionnent en restant positionnés, ou alors ils s’empilent quand la fenêtre devient plus étroite et se positionnent côte à côte quand elle s’élargit.
Exemple de la page d’accueil du site OpenClassrooms qui illustre ce phénomène avec trois situations (écran large, écran moyen et petit écran) :

 

 

Aspect sur grand écran
Aspect sur grand écran
Aspect sur écran moyen
Aspect sur écran moyen
Aspect sur petit écran
Aspect sur petit écran

 

Plutôt que de réduire les éléments au risque de les rendre illisibles, le choix a été fait de les empiler petit à petit quand la fenêtre devient plus étroite. Une autre option pourrait consister à supprimer des éléments pas vraiment utiles, mais nous reviendrons plus tard sur ce point. Pour le moment on va juste se demander comment on peut choisir entre les deux options présentées à la figure suivante.

 

Empilement ou réduction ?
Empilement ou réduction ?

 

C’est ici qu’interviennent les 4 sortes de classes vues précédemment pour les colonnes. Bootstrap considère 4 sortes de médias : les petits, genre smartphones (moins de 768 pixels), les moyens, genre tablettes (moins de 992 pixels), les écrans moyens (moins de 1200 pixels) et enfin les grands écrans (plus de 1200 pixels). Vous trouverez à la figure suivante un tableau pour illustrer les différences de réaction selon la catégorie.

Petit écran
(smartphone)

Écran réduit
(tablette)

Écran moyen
(desktop)

Grand écran
(desktop)

Comportement

Redimensionnement

Redimensionnement

Redimensionnement

Empilage puis redimensionnement

Classe

col-xs-*

col-sm-*

col-md-*

col-lg-*

Valeur de
référence

< 768 px

>= 768 px

>= 992 px

>= 1200 px

Le nom des classes est intuitif : xs pour x-small, sm pour small, md pour medium et lg pour large.

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>

 

 

La figure suivante illustre ce code avec l’effet quand on passe sur un écran plus grand.

 

Un élément de 4 colonnes à côté d'un élément de 8 colonnes
Un élément de 4 colonnes à côté d’un élément de 8 colonnes

 

Voici la version tablette :


<div class=« row »>
<div class=« col-sm-4″>Largeur 4</div>
<div class=« col-sm-8″>Largeur 8</div>
</div>

La figure suivante illustre ce code avec l’effet quand on passe sur un écran plus petit ou plus grand.

 

L'affichage change en fonction de la taille de l'écran

L’affichage change en fonction de la taille de l’écran

 

 

 

Et enfin, voici la version grand écran :


<div class=« row »>
<div class=« col-lg-4″>Largeur 4</div>
<div class=« col-lg-8″>Largeur 8</div>
</div>

 

 

La figure suivante illustre ce code avec l’effet quand on passe sur un écran de plus en plus petit.

 

La version grand écran
La version grand écran

 

La largeur des éléments de la grille est calculée en pourcentage selon la fenêtre de visualisation. Rien n’interdit évidemment de mélanger des classes des 3 catégories pour créer des effets particuliers avec certains éléments qui doivent s’empiler et d’autre pas (c’est même la stratégie utilisée pour la mise en page « responsive » comme nous allons bientôt le voir)…

Après cette petite mise en jambe pour vous présenter la notion de grille dans Bootstrap, on va passer en revue les possibilités dans le détail. Mais pour visualiser tous les exemples qui vont suivre, je vous propose d’ajouter un peu de style, histoire d’afficher les éléments de façon explicite. Pour éviter de polluer le code HTML on va mettre ce style spécifique dans un fichier CSS particulier (ce fichier sera nommé tuto.css dans le code) :


body {
padding-top: 10px;
}
[class*="col-"], footer {
background-color: lightgreen;
border: 2px solid black;
border-radius: 6px;
line-height: 40px;
text-align: center;
}

Le seul but de ces règles de style est de faire apparaître nettement les éléments à l’écran. Une petite marge interne en haut pour le corps, pour éviter que tout soit collé en haut de l’écran. Des bordures (avec des coins arrondis pour l’esthétique) et un fond coloré pour distinguer les éléments. Une hauteur fixée à 40 pixels, parce qu’étant donné que la hauteur des rangées dépend du contenu, on aurait un rendu hétéroclite. La figure suivant présente l’aspect obtenu.

 

Le résultat final

Le résultat final

 

Comments are closed.