Avant toute chose, il faut définir ce qu’est un framework. Il s’agit d’un ensemble de composants structurés qui sert à créer les bases et à organiser le code informatique pour faciliter le travail des programmeurs, que ce soit en terme de productivité ou de simplification de la maintenance. Il en existe beaucoup pour les applications web qui ciblent de nombreux langages : Java, Python, Ruby, PHP…

Il existe des frameworks 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 frameworks 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… Ils sont devenus à la mode et il en existe un certain nombre :

Une page web contient du texte et des images, mais aussi un certain nombre d’éléments très fréquents : listes, tableaux, formulaires, icônes, boutons. Créer une harmonie dans la présentation des tous ces éléments n’est pas une tâche aisée.

 Bootstrap permet de créer un rendu visuel cohérent pour que tous ces éléments cohabitent de façon esthétique.

Bootstrap est un framework 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. Le framework le 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

  • Les navigateurs sont pleins de fantaisies et ont des comportements très différents malgré leur lente convergence vers les standards. Les frameworks sont cross-browser, c’est à dire que la présentation est similaire quel que soit le navigateur utilisé et d’une parfaite compatibilité .

  • Les frameworks CSS font gagner du temps de développement parce qu’ils nous proposent les fondations de la présentation.

  • Les frameworks CSS normalisent la présentation en proposant un ensemble homogène de styles.

  • Les frameworks CSS proposent en général une grille pour faciliter le positionnement des éléments.

  • Les frameworks 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 désormais la prise en compte de tailles d’écran très variées ; les frameworks CSS prennent généralement en compte cette contrainte.

Les inconvénients

  • Pour utiliser efficacement un framework il faut bien le 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 LESS (que nous verrons dans le cours).

Découverte de Bootstrap

Origine 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 le framework s’est ensuite enrichi 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 et se limite à référencer quelques librairies, comme nous allons bientôt le voir.

Il a été mis à disposition du public sous licence Apache. Le framework en est actuellement à la version 3. Celle-ci a pris un virage particulier en intégrant l’aspect « responsive » par défaut, alors qu’auparavant cette fonctionnalité faisait l’objet d’un fichier séparé. Cette version est même déclarée comme « mobile-first ». Avec l’utilisation croissante d’appareils mobiles, le framework s’est adapté pour offrir une solution censée couvrir tous les besoins.

Désirez-vous connaitre davantage ?

En résumé 

  • Bootstrap est un framework CSS qui comporte en plus des plugins jQuery pour composer des pages web.

  • Bootstrap est un framework récent qui a connu un développement et une popularité très rapide.

  • Bootstrap s’installe facilement en référençant quelques fichiers sur son serveur ou même en passant directement par des CDN.

  • Bootstrap propose des templates de démarrage pour éviter de partir avec une page blanche.

  • Bootstrap intègre des medias queries pour adapter les pages web à tous les supports de visualisation.

Manifester votre intérecement