Cours complet Bootstrap 4

• Les navigateurs sont pleins de fantaisies et ont des comportements très différents malgré leur lente convergence vers les standards. Les bibliothèques sont cross-browser, c'est-à-dire que la présentation est similaire, quel que soit le navigateur utilisé et d'une parfaite compatibilité.
• Les bibliothèques CSS font gagner du temps de développement parce qu'ils nous proposent les fondations de la présentation.
• Les bibliothèques CSS normalisent la présentation en proposant un ensemble homogène de styles.
• Les bibliothèques CSS proposent en général une grille pour faciliter le positionnement des éléments.
• Les bibliothèques 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 bibliothèques CSS prennent généralement en compte cette contrainte.

Pour utiliser efficacement une bibliothèque, 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.

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 bibliothèque 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 bibliothèque en est actuellement à la version 4.

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ée 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é.

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 bibliothèque avec Reboot.

Bootstrap est une bibliothèque 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 bibliothèque 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…

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) { … }

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 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.

Si vous explorez le code de Bootstrap, vous trouverez beaucoup d'utilisation des Media Queries, 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;
  }
}

Voici la syntaxe utilisée :

// Très petits supports
// Pas de média 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) { ... }
// Grands supports (écrans, 992px et au-delà)
@media (min-width: 992px) { ... }
// Très grands supports (grands écrans, 1200px et au-delà)
@media (min-width: 1200px) { ... }