Bootstrap (framework)
Bootstrap est une collection d'outils utiles à 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.
| Créateur | Mark Otto, Jacob Thornton |
|---|---|
| Développé par | |
| Première version | |
| Dernière version | 5.2.3 () |
| Version avancée | 5.3.0-alpha3 () |
| Dépôt | https://github.com/twbs/bootstrap |
| Assurance qualité | Intégration continue |
| Écrit en | JavaScript, CSS, HTML et Sass |
| Système d'exploitation | Multiplateforme |
| Environnement | World Wide Web |
| Langues | Anglais |
| Type | Framework d'interface |
| Licence | Licence MIT |
| Site web | https://getbootstrap.com/ |
Historique
Débuts chez Twitter
Avant l'arrivée de Bootstrap, plusieurs bibliothèques existaient, ce qui menait à des incohérences et à un coût de maintenance élevé.
Cette plate-forme a été conçue par deux développeurs faisant partie de la mouvance de développeurs qui gravitent autour de Twitter, Mark Otto et Jacob Thornton[1], et avait le nom de Twitter Blueprint en 2010[2].
Le premier déploiement à échelle réelle eut lieu lors de la première hackweek organisée par Twitter[3].
En août 2011, Twitter place Bootstrap sous licence open source.
Bootstrap 2 et 3
Bootstrap 2 a été lancé le 31 janvier 2012, en ajoutant un support intégré pour les Glyphicons, plusieurs nouveaux composants, ainsi que des modifications à de nombreux composants existants. Cette version prend en charge la conception de sites web réactifs. Cela signifie que la mise en page des pages web s'ajuste dynamiquement, en tenant compte des caractéristiques de l'appareil utilisé (bureau, tablette, téléphone portable)[4].
La version majeure suivante, Bootstrap 3, est sortie le 19 août 2013. Elle a redessiné les composants pour utiliser le flat design, et une approche mobile-first[5].
Bootstrap 4
Mark Otto a annoncé Bootstrap 4 le 29 octobre 2014 en même temps que la sortie de Boostrap 3.3.0[6]. La première version alpha de Bootstrap 4 est sortie le 19 août 2015[7] et la première version bêta presque deux ans plus tard, le 10 août 2017[8]. Mark a suspendu les travaux sur Bootstrap 3 le 6 septembre 2016, afin de libérer du temps pour travailler sur Bootstrap 4. Bootstrap 4 a été finalisée le 18 janvier 2018[9].
Il en résulte une réécriture massive du code, en en profitant pour remplacer le préprocesseur utilisé LESS par SASS, et en abandonnant le support pour les systèmes IE8, IE9 et iOS 6. Le support de CSS flexbox est également présent, et de nombreuses classes utilitaires et options de personnalisations ont aussi été ajoutées.
Bootstrap 4 prend en charge les dernières versions de Google Chrome, Firefox, Internet Explorer, Opera et Safari (sauf sur Windows). Il prend également en charge la dernière version de Firefox ESR.
Version alpha
La version alpha de la version 5 de Bootstrap est sortie le [10].
Changements majeurs :
- Abandon de la bibliothèque jQuery en faveur de simple Javascript
- Abandon du support pour le navigateur Internet Explorer 10 et Internet Explorer 11
- Amélioration de l'API
- Ajout d'une bibliothèque spécifique d'icônes
Version bêta
La version bêta de la version 5 de Bootstrap a été officiellement publié le 7 décembre 2020, soit trois semaines après le lancement de la troisième alpha.
La version 5 bêta 2 est actuellement la dernière itération du package.
Les changements majeurs incluent[11] :
- Support RTL - Affichage de texte "de droite à gauche" pour p.e. Langues arabes
- Classes renommées pour les propriétés logiques
- Mise à jour vers Popper.js v2
- Attributs de données avec espace de nom
- Améliorations de JavaScript et corrections de bogues
- API améliorée - états dans les utilitaires
Les changements en cours d'implémentation sont[12] :
- Système de module Sass
- Utilisation accrue des propriétés personnalisées CSS
- Incorporation des SVG dans HTML au lieu de CSS
Les premiers cas d'utilisation de la version Bootstrap 5 bêta sont apparus quelques jours seulement après la première officielle, et incluent notamment le kit d'interface utilisateur de Material Design, MDB 5, pour Bootstrap 5[13]. MDB a également été le premier à intégrer la dernière version de Bootstrap avec les technologies frontales les plus populaires telles que Angular, React et Vue[14].
En février 2021, Bootstrap était le dixième projet le plus populaire sur GitHub[15].
Généralités
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[16], permettant aux projets utilisant Bootstrap de s'adapter dynamiquement au format des supports depuis lesquels on accède (PC, tablette, smartphone).
Fonctionnalités
Fonctionnement
La modularité de Bootstrap consiste en une série de feuilles de styles LESS (à partir de la version 4 SASS) qui implémentent différents composants du toolkit[17]. 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[17]…
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[3].
Standardisation
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 nombre d'éléments graphiques au format standardisé : boutons, libellés, icônes, miniatures, barres de progression…
Javascript
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)[18] et AngularJS (UI Bootstrap)[19] ou AngularStrap[20].
Notes et références
- Comptes Twitter : @mdo (Mark Otto) et @fat (Jacob Thornton).
- (en) « About », twitter (consulté le ).
- (en) Mark Otto, « Bootstrap from Twitter », twitter, (consulté le ).
- (en-US) « Beginner’s Guide to Responsive Web Design », sur Treehouse Blog, (consulté le )
- (en) Mark Otto, Jacob Thornton, and Bootstrap contributors, « Bootstrap 3 released », sur Bootstrap Blog, (consulté le )
- (en) Mark Otto, Jacob Thornton, and Bootstrap contributors, « Bootstrap 3.3.0 released », sur Bootstrap Blog, (consulté le )
- (en) Mark Otto, Jacob Thornton, and Bootstrap contributors, « Bootstrap 4 alpha », sur Bootstrap Blog, (consulté le )
- (en) Mark Otto, Jacob Thornton, and Bootstrap contributors, « Bootstrap 4 Beta », sur Bootstrap Blog, (consulté le )
- (en) Mark Otto, Jacob Thornton, and Bootstrap contributors, « Bootstrap 4 », sur Bootstrap Blog, (consulté le )
- (en) « Bootstrap 5 alpha! », sur Bootstrap Blog, (consulté le )
- (en) Mark Otto, « Bootstrap Blog », sur Bootstrap Blog (consulté le )
- (en) Mark Otto, « Bootstrap 5 alpha! », sur Bootstrap Blog, (consulté le )
- « Bootstrap 5 Material Design », sur MDBootstrap.com (consulté le )
- (en-US) « Material Design for Bootstrap 5 & 4 - the most popular & free UI KIT », sur Material Design for Bootstrap (consulté le )
- (en) « Dépôts triés par le nombre d'étoiles sur Github », sur GitHub (consulté le )
- « HTML5 Boilerplate passe sous licence MIT, Bootstrap et JQuery mis à jour », PC INpact, (consulté le ).
- (en) « Twitter rolls out Bootstrap toolkit for developing web apps », zdnet.com, (consulté le ).
- (en) « Dojo Bootstrap » (consulté le ).
- (en) « UI Bootstrap » (consulté le ).
- (en) « AngularStrap » (consulté le ).