Comme vous le savez probablement le site bootstrap permet facilement de créer un layout de site en responsive design. Et travailler sur n’importe quel appareil ou ordinateur dans différents bureaux ou maisons, où ils utilisent le meilleur bureau pour les jeux à partir de https://www.hotrate.com/gaming-desks/.
On suppose pour la suite que vous avez intégré le css et le javascript de bootstrap dans votre page, je ne m’étends pas dessus, tout est détaillé ici : http://getbootstrap.com/getting-started/
Les outils pour tester
Pour tester les différentes résolutions, je vous conseille d’utiliser Firefox. Une fois votre page chargée, appuyer sur Ctrl + shift + M pour ouvrir la vue adaptative. De là, vous pouvez utiliser des résolutions prédéfinies, changer la taille, basculer en mode portrait…
Les différentes tailles écran
Par défaut, bootstrap reconnait quatre largeurs d’affichage :
- Extra small devices (< 768px), noté xs
- Small devices (>= 768 px et < 992px), noté sm
- Medium devices (>= 992 px et < 1200px), noté md
- Large devices (>= 1200px), noté lg
Par la suite, chaque fois que vous verrez xs, sm, md ou lg dans un nom de classe, cette classe sera en relation avec un type d’affichage. Ne vous inquiétez pas si ce n’est pas clair pour l’instant, nous allons étudier ça en détail.
Bootstrap et les colonnes : principes de base
Bootstrap possède un design par colonnes. Par défaut, un conteneur est découpé en 12 colonnes. Afin de les utiliser, vous devez auparavant déclarer un conteneur (par défaut, une div de classe .row)
Nous allons créer un design à deux colonnes. Tapez dans votre page le code ci-dessous :
<div class="row">
<div class="col-md-2" style="background-color: cadetblue">
Colonne de gauche
</div>
<div class="col-md-10" style="background-color: cornflowerblue">
Colonne de droite
</div>
</div>
Et ouvrons notre page dans un navigateur (cliquez pour voir en grand):
Sans surprise, on a bien deux colonnes sur un affiche standard. La première prend 2/12e (.col-md-2) de la taille du conteneur, et la seconde prend 10/12e (.col-md-12)
En revanche, si on réduit la largeur du navigateur en dessous de 992px, on passe en écran small, et les rendu est complètement différent :
En effet, par défaut, nous entrons dans un état pour lequel le css de bootstrap ne sait pas gérer. Afin qu’il sache comment faire, nous pouvons ajouter un style de type sm :
<div class="row">
<div class="col-md-2 col-sm-2" style="background-color: cadetblue">
Colonne de gauche
</div>
<div class="col-md-10 col-sm-10" style="background-color: cornflowerblue">
Colonne de droite
</div>
</div>
Nous pouvons maintenant recharger la page, et tout se passe bien (tant qu’on n’arrive pas au xs) :
Pour résumer, si vous voulez afficher une colonne dans toutes les tailles, il faudra a priori 4 styles, et chacun va s’activer en fonction de la taille de l’affichage. Vous pouvez également ne pas remplir de style pour les tailles les plus petites, et les objets vont alors s’empiler les uns au dessus des autres (ce qui est le comportement normal des div).
Modifier la taille des colonnes en fonction de l’affichage
Imaginons que notre menu de gauche doive garder une largeur minimale. Dans un écran large, on pourra se contenter d’une colonne (1/12 de l’affichage), mais quand on réduit, il faudra certainement agrandir cette partie. Cela se fait très facilement, il suffit d’augmenter le nombre de colonnes en fonction de l’affichage. N’oubliez de réduire ceux de la colonne de droite pour arriver à un total de 12 :
<div class="row">
<div class="col-xs-4 col-md-3 col-sm-2 col-lg-1" style="background-color: cadetblue">
Colonne de gauche
</div>
<div class="col-xs-8 col-md-9 col-sm-10 col-lg-11" style="background-color: cornflowerblue">
Colonne de droite
</div>
</div>
Analysons en détail :
- en xs (Xtra small), la colonne de gauche fera 4/12e (col-xs-4) et la colonne de droite fera 8/12e (col-xs-8)
- en sm (small), la colonne de gauche fera 3/12e (col-sm-3) et la colonne de droite fera 9/12e (col-sm-9)
- en md (medium), la colonne de gauche fera 2/12e (col-md-2) et la colonne de droite fera 10/12e (col-md-10)
- en lg (large), la colonne de gauche fera 1/12e (col-lg-1) et la colonne de droite fera 11/12e (col-lg-11)
Afficher ou cacher des objets en fonction de la taille
Rien de plus simple. Pour cacher des objets, on utilise la classe .hidden-<style>, et pour afficher, on utilise .visible-<taille>.
Afin de bien comprendre, voici un exemple :
- je veux 3 colonnes. La colonne de droite doit disparaitre quand je passe en mode xs. La colonne du milieu va alors prendre la place restante.
- Dans la colonne de gauche, je veux qu’un texte apparaisse en xs et en md.
Soit le code suivant :
<div class="row">
<div class="col-xs-3 col-md-3 col-sm-2 col-lg-2" style="background-color: cadetblue">
Colonne de gauche
<span class="hidden-lg hidden-md visible-sm visible-xs">
Je suis en small ou Xtra small, je m'affiche !
</span>
</div>
<div class="col-xs-9 col-md-6 col-sm-8 col-lg-8" style="background-color: cornflowerblue">
Colonne du milieu
</div>
<div class="col-md-3 col-sm-2 col-lg-2 hidden-xs" style="background-color: cornsilk">
Colonne de droite
</div>
</div>
Voyons en détail ce qui se passe :
- en xs (Xtra small) :
- la colonne de gauche fera 3/12e (col-xs-3)
- la colonne du milieu fera 9/12e (col-xs-9)
- la colonne de droite sera invisible (hidden-xs)
- le texte « small » sera visible (visible-xs)
- en sm (small)
- la colonne de gauche fera 2/12e (col-sm-2)
- la colonne du milieu fera 8/12e (col-sm-8)
- la colonne de droitefera 2/12e (col-sm-2)
- le texte « small » sera visible (visible-sm)
- en md (medium)
- la colonne de droite fera 3/12e (col-md-3)
- le texte « small » sera invisible (hidden-md)
- la colonne de gauche fera 3/12e (col-md-3)
- la colonne du milieu fera 6/12e (col-md-6)
- en lg (large)
- la colonne de gauche fera 2/12e (col-lg-2)
- la colonne du milieu fera 8/12e (col-lg-8)
- la colonne de droite fera 2/12e (col-lg-2)
- le texte « small » sera invisible (hidden-lg)
A noter que les class hidden-* et visible-* sont applicables à tous les objets, pas seulement les colonnes. Vous pouvez donc aussi les appliquer par exemple à des images qui prennent trop de place pour des petits devices.
En résumé
Vous avez maintenant les bases, mais rien ne remplacera une batterie de tests. Il ne vous reste plus qu’à habiller votre site selon vos goûts.