Bootstrap est une collection d'outils utile à la création du design (graphisme, animation et interactions avec la page dans le navigateur ... etc. ...) de sites et d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. C'est l'un des projets les plus populaires sur la plate-forme de gestion de développement GitHub.
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.
- Une mise en page basée sur une grille de 12 colonnes bien pratique. Bien sûr, si vous avez besoin de plus de 12 colonnes, ou de moins, il est toujours possible de changer la configuration ;
- L'utilisation de Normalize.css ;
- Du code fondé sur HTML5 et CSS3 ;
- Une bibliothèque totalement open source sous licence Apache ;
- 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 IE7 a été abandonnée avec la version 3), 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 LESS, un outil bien pratique qui étend les possibilités de CSS (un portage sur SASS existe également).
La modularité de Bootstrap consiste en une série de feuilles de styles LESS qui implémentent différents composants du toolkit. Une feuille de style principale (bootstrap.less) englobe les feuilles de style des composants. Les développeurs peuvent alors sélectionner les composants dont ils ont besoin en modifiant cette feuille principale. L'utilisation de LESS permet la manipulation de variables, de fonctions, d'opérateurs, sélecteurs…
Depuis la version 2, Bootstrap dispose d'une option supplémentaire de « personnalisation ».
Le système de grille et le style adaptatif sont standardisés sur une grille de 940 pixels de large, que les développeurs peuvent adapter. Ces définitions sont déclinées en quatre variations qui peuvent être utilisées dans différents formats et supports : téléphones (portrait et paysage), tablette et PC (haute et basse résolution). Ces déclinaisons adaptent automatiquement l'affichage de la page.
Bootstrap fournit une feuille de style CSS qui contient des définitions de base pour tous les composants HTML, ce qui permet de disposer d'une apparence uniforme pour les textes, tableaux et les éléments de formulaires.
Le framework fournit également nombres d'éléments graphiques au format standardisé : boutons, libellés, icônes, miniatures, barres de progression…
Bootstrap fournit plusieurs composants sous forme de plugins utilisant la bibliothèque JQuery. Ces composants permettent l'addition de nouvelles fonctionnalités au niveau de l'interface (tooltip, carrousels…) mais aussi d'améliorer le fonctionnement de composants existants (auto-complétion…).
D'autres plugins permettent à Bootstrap de s'intégrer à des frameworks tiers comme Dojo Toolkit (Dojo Bootstrap) et AngularJS (UI Bootstrap) ou AngularStrap.
Bootstrap est compatible avec les dernières versions des navigateurs majeurs, mais peut fonctionner de manière dégradée sur des navigateurs plus anciens.
Depuis la version 2, le framework adopte la conception de sites web adaptatifs, permettant aux projets utilisant Bootstrap de s'adapter dynamiquement au format des supports depuis lesquels ils sont accédés (PC, tablette, smartphone).