Bootstrap 4 : présentation
Pour utiliser efficacement Bootstrap, vous devez déjà être convaincu de son utilité, vous devez aussi savoir l’installer. Ce chapitre est destiné à vous faire découvrir en quoi Bootstrap peut vous aider et un peu son historique. Nous aborderons également les Medias Queries que Bootstrap utilise pour que les pages s’adaptent automatiquement au support utilisé pour les visualiser et les rendre ainsi « responsives ».
Une librairie
Il existe des librairies côté serveur (désignés backend en anglais), et d’autres côté client (désignés frontend en anglais). Bootstrap fait partie de cette deuxième catégorie. Les librairies CSS sont spécialisés, comme leur nom l’indique, dans les CSS ! C’est-à-dire qu’ils nous aident à mettre en forme les pages web : organisation, aspect, animation… Elles sont à la mode et il en existe un certain nombre, en voici quelques-uns :
Bootstrap est une librairie CSS, mais pas seulement, puisqu’il embarque également des composants HTML et JavaScript. Il comporte un système de grille simple et efficace pour mettre en ordre l’aspect visuel d’une page web. Il apporte du style pour les boutons, les formulaires, la navigation…
Il permet ainsi de concevoir un site web rapidement et avec peu de lignes de code ajoutées.
La librairie la plus proche de Bootstrap est sans doute Foundation qui est présenté comme « The most advanced responsive front-end framework in the world ». Cette absence de modestie est-elle de mise ? Je pense que c’est surtout une affaire de goût et de préférence personnelle. En tout cas en terme de popularité c’est Bootstrap qui l’emporte haut la main.
Les intérêts d’utiliser une librairie
- Les navigateurs sont pleins de fantaisies et ont des comportements très différents malgré leur lente convergence vers les standards. Les librairies sont cross-browser, c’est à dire que la présentation est similaire quel que soit le navigateur utilisé et d’une parfaite compatibilité .
- Les librairies CSS font gagner du temps de développement parce qu’ils nous proposent les fondations de la présentation.
- Les librairies CSS normalisent la présentation en proposant un ensemble homogène de styles.
- Les librairies CSS proposent en général une grille pour faciliter le positionnement des éléments.
- Les librairies CSS offrent souvent des éléments complémentaires : boutons esthétiques, barres de navigation, etc…
- La grande diffusion de nouveaux moyens de visualisation du web (smartphones, tablettes…) impose de s’adapter aux tailles d’écran très variées, les librairies CSS prennent généralement en compte cette contrainte.
Les inconvénients d’utiliser une librairie
Pour utiliser efficacement une librairie il faut bien la connaître, ce qui implique un temps d’apprentissage.
La normalisation de la présentation peut devenir lassante en lissant les effets visuels.
Par rapport aux deux inconvénients énoncés, Bootstrap est d’une prise en main rapide même pour un débutant et est totalement configurable parce qu’il est construit avec Sass.
Découverte de Bootstrap
Historique de Bootstrap
Vous connaissez forcément Twitter, un des principaux réseaux sociaux qui inondent la planète de liens virtuels entre les humains devenus des noyaux cybernétiques. Le projet Bootstrap a été créé au départ par Mark Otto et Jacob Thornton pour répondre à des besoins internes de développement de cette entreprise au niveau de l’uniformisation de l’aspect des pages web. Il s’agissait juste de stylisation CSS, mais la librairie s’est ensuite enrichie de composants Javascript.
Il a ensuite été publié en 2011 en devenant rapidement populaire parce qu’il est venu se positionner dans un espace vacant du développement. Son système de grille de 12 colonnes est devenu une référence. D’autre part sa mise en œuvre est aisée comme nous allons bientôt le voir.
Il a été mis à disposition du public sous licence MIT. La librairie en est actuellement à la version 4.
Contenu de la librairie
Bootstrap propose :
- Une mise en page basée sur une grille de 12 colonnes fondée sur flexbox;
- L’utilisation de Normalize auquel est ajouté l’extension Reboot dans la version 4 ;
- Du code fondé sur HTML5 et CSS3 ;
- Une bibliothèque totalement open source sous licence MIT;
- Du code qui tient compte du format d’affichage des principaux outils de navigation (responsive design) : smartphones, tablettes… ;
- Des plugins jQuery de qualité ;
- Un résultat cross-browser (la prise en charge de IE8 a été abandonnée avec la version 4), donc une garantie de compatibilité maximale ;
- Une bonne documentation ;
- La garantie d’une évolution permanente ;
- Une mine de ressources variées sur le web ;
- Une architecture basée sur Sass, un outil bien pratique qui étend les possibilités de CSS.
Vous pouvez trouver toutes les informations sur Bootstrap directement sur le site dédié.
C’est quoi Normalize ?
Les navigateurs n’adoptent pas tous les mêmes valeurs par défaut pour les styles des éléments HTML. Cela peut générer quelques surprises au rendu des pages web selon le navigateur utilisé. D’autre part certains navigateurs présentent des défauts de prise en compte de certains éléments.
Normalize est un petit fichier CSS qui établit des règles pour avoir un rendu identique quel que soit le navigateur utilisé. Au lieu d’agir brutalement comme les reset CSS qui remettent toutes les valeurs à zéro, Normalize agit intelligemment en conservant ce qui est utile et en jouant finement sur les éléments. Vous pouvez trouver le détail des règles appliquées avec leur explication ici.
Nous verrons dans ce cours que Bootstrap étend cette librairie avec Reboot.
Évolution de Bootstrap
Bootstrap est une librairie très populaire qui évolue rapidement avec l’arrivée fréquente de nouvelles versions. C’est à la fois un avantage (il s’améliore de plus en plus) et un inconvénient (le code qu’on a écrit pour une mise en page devient obsolète pour les nouvelles versions).
Le passage à la version 3 a été une petite révolution avec de très nombreux changements, en particulier une refonte complète de la grille. L’évolution de la librairie s’est faite essentiellement en direction des appareils nomades qui constituent peu à peu le parc le plus important d’appareils pour surfer sur Internet.
La version 4 apporte son lot d’innovations ainsi que de nouveaux composants tout en perdant certains autres. Les principales évolutions concernent :
- le changement complet de la barre de navigation
- l’utilisation de Flexbox avec une grille totalement remaniée (mais du coup abandon de la prise en charge de IE9)
- l’utilisation de Sass à la place de Less
- une réécriture presque complète du code CSS
- un passage à ES6 pour l’écriture des plugins Javascript
- l’ajout du composant Card
- l’abandon des icônes de Glyphicon…
La principale source d’information pour connaître les changements des nouvelles versions est le blog officiel. Il est aussi intéressant de s’informer en amont sur la page GitHub du projet pour connaître les demandes des utilisateurs (Pull Requests) et les problèmes rencontrés (Issues).
Les Media Queries
Les Media Queries sont destinées à simplifier la création de pages web pour les rendre consultables sur des supports variés (tablettes, smartphones…).
Cette section n’est qu’une introduction rapide à ce domaine qui mériterait un cours à lui tout seul. Elle est destiné à ceux qui découvrent ce sujet, les autres peuvent passer directement au chapitre suivant.
Avec les Media Queries on peut cibler :
- La résolution ;
- Le type de media ;
- La taille de la fenêtre (width et hight) ;
- La taille de l’écran (device-width et device-height);
- Le nombre de couleurs ;
- Le ratio de la fenêtre (par exemple le 16/9) ;
- etc.
Les plus courageux peuvent consulter directement les spécifications du W3C.
La liste est longue, malheureusement peu de navigateurs actuels sont capables de digérer tout ça. On se limite en général à la taille de l’affichage, l’orientation et parfois le ratio.
Je ne comprends pas la différence entre taille de l’écran et taille de la fenêtre !
Ah ! Bonne réflexion. Cette distinction n’a aucun sens pour les écrans d’ordinateurs mais trouve tout son intérêt pour les smartphones. La taille de l’écran est la surface physique réelle alors que la taille de la fenêtre est celle dont le smartphone « pense » disposer. Par exemple pour un iPhone 4 la surface réelle est de 640×960 px et la surface de la fenêtre est de 320×480 px. Autrement dit un iPhone est pessimiste sur ses possibilités d’affichage !
Mais ce n’est pas le seul souci ! Le navigateur embarqué sur un smartphone a lui aussi une certaine idée de la surface d’affichage dont il dispose (le viewport). Par exemple, pour continuer avec l’exemple de l’iPhone 4, qui utilise Safari, ce dernier pense disposer d’une largeur de 980 px ! Sur ces appareils il est aussi possible d’utiliser le zoom et notre mise en page risque de s’en ressentir.
On peut se demander comment s’en sortir dans tout ce bazar… Heureusement on dispose de la balise META viewport pour fixer certaines valeurs, voici ce qui est préconisé dans le template de Bootstrap :
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- On ouvre la fenêtre à la largeur de l’écran :width=device-width
- On règle le zoom :initial-scale=1
- On ajoute shrink-to-fit=no spécifiquement pour Safari
Vous pouvez aussi fixer d’autres valeurs. Par exemple, empêcher l’utilisateur de zoomer.
Les principaux navigateurs permettent de tester le rendu sur mobile. Par exemple avec Firefox il faut utiliser la commande « Vue adaptative » dans le menu « Développement web ».
Syntaxe des Media Queries
Une media query est une expression dont la valeur est soit vraie, soit fausse. Voici un exemple dans du code CSS :
@media (max-width: 576px) { … }
@media est une règle apparue avec le CSS2. Elle permet à la base de cibler un media : écran, imprimante, projecteur… Cette règle est reprise et étendue avec le CSS3.
L’expression située entre parenthèses est évaluée, et si elle est « vraie », les règles situées dans le bloc sont prises en compte.
Ici l’expression est max-width: 576px, elle se comprend facilement. Elle est « vraie » si le support de visualisation de la page a une largeur d’affichage inférieure ou égale à 576px.
Oui, mais on n’a pas spécifié de média là !
Oui parce qu’on veut prendre en compte tous les médias existants ! Voici une syntaxe équivalente :
@media all and (max-width: 576px) { … }
On en profite pour voir qu’on peut combiner des éléments avec des opérateurs logiques.
Voici une autre expression avec le même opérateur logique :
@media (min-width: 576px) and (max-width: 768px) { … }
Ici, on veut prendre en compte les règles du bloc si l’affichage se situe entre 576px et 768px.
Si on veut appliquer des règles lorsque l’orientation est « portrait », voici la syntaxe à utiliser :
@media (orientation: portrait) { … }
Comme vous pouvez le voir, la syntaxe est simple, ce qui l’est moins ce sont les règles à définir.
Mais quand vous utilisez Bootstrap, vous n’avez pas à vous soucier de tout ça…
Si vous explorez le code de Bootstrap, vous trouverez beaucoup d’utilisation des Media Queries, comme par exemple ici, où est définie une règle de dimension pour la classe container lorsque l’affichage est d’au moins 576px :
@media (min-width: 576px) {
.container {
width: 540px;
}
}
Nous verrons plus loin dans ce cours que Bootstrap définit cinq types de medias selon la dimension de l’affichage.
Voici la syntaxe utilisée :
// Très petits supports
// Pas de media puisque c'est le support par défaut
// Petits supports (smartphones, 576px et au-delà)
@media (min-width: 576px) { ... }
// Supports moyens (tablettes, 768px et au-delà)
@media (min-width: 768px) { ... }
// Grand supports (écrans, 992px et au-delà)
@media (min-width: 992px) { ... }
// Très grands supports (grands écrans, 1200px et au-delà)
@media (min-width: 1200px) { ... }
En résumé
- Bootstrap est une librairie CSS qui comporte en plus des plugins jQuery pour composer des pages web.
- Bootstrap est une librairie relativement récente qui a connu un développement et une popularité très rapides.
- Bootstrap intègre des medias queries pour adapter les pages web à tous les supports de visualisation.
