Bootstrap (framework)

Un article de Wikipédia, l'encyclopédie libre.
(Redirigé depuis Twitter Bootstrap)
Sauter à la navigation Sauter à la recherche

Bootstrap
Description de l'image Bootstrap logo.svg.

Informations
Créateur Mark Otto (d) et Jacob Thornton (d)Voir et modifier les données sur Wikidata
Développé par Twitter
Première version
Dernière version 4.5 ()
Dépôt https://github.com/twbs/bootstrap
Assurance qualité Intégration continueVoir et modifier les données sur Wikidata
Écrit en JavaScript, CSS, HTML et Sass (langage)Voir et modifier les données sur Wikidata
Système d'exploitation MultiplateformeVoir et modifier les données sur Wikidata
Environnement World Wide Web
Langues Anglais
Type Framework d'interface
Licence Licence MIT
Site web getbootstrap.comVoir et modifier les données sur Wikidata

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.

Historique[modifier | modifier le code]

Débuts chez Twitter[modifier | modifier le code]

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. En avril 2020, Bootstrap est le septième projet le plus populaire sur GitHub[4].

Bootstrap 2 et 3[modifier | modifier le code]

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)[5].

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[6].

Bootstrap 4[modifier | modifier le code]

Mark Otto a annoncé Bootstrap 4 le 29 octobre 2014 en même temps que la sortie de Boostrap 3.3.0[7]. La première version alpha de Bootstrap 4 est sortie le 19 août 2015[8] et la première version bêta presque deux ans plus tard, le 10 août 2017[9]. 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[10].

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.

Bootstrap 5 (version alpha)[modifier | modifier le code]

La version alpha de la version 5 de Bootstrap est sortie le [11].

Changements majeurs :

Les premiers cas d'utilisation de la version Bootstrap 5 Alpha sont apparus quelques jours seulement après la première officielle, les plus importants incluent:

  • MDB 5 - Kit d'interface utilisateur de Material Design pour Bootstrap 5[12]

Généralités[modifier | modifier le code]

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[13], permettant aux projets utilisant Bootstrap de s'adapter dynamiquement au format des supports depuis lesquels on accède (PC, tablette, smartphone).

Fonctionnalités[modifier | modifier le code]

Exemple de page web utilisant Bootstrap visualisé avec Firefox
Exemple de page web utilisant Bootstrap visualisé avec Firefox

Fonctionnement[modifier | modifier le code]

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[14]. 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[14]

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[modifier | modifier le code]

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[modifier | modifier le code]

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)[15] et AngularJS (UI Bootstrap)[16] ou AngularStrap[17].

Notes et références[modifier | modifier le code]

  1. Comptes Twitter : @mdo (Mark Otto) et @fat (Jacob Thornton).
  2. (en) « About », twitter (consulté le 20 mars 2014).
  3. a et b (en) Mark Otto, « Bootstrap from Twitter », twitter, (consulté le 20 mars 2014).
  4. (en) « Dépôts triés par le nombre d'étoiles sur Github », sur GitHub (consulté le 4 avril 2020)
  5. (en-US) « Beginner’s Guide to Responsive Web Design », sur Treehouse Blog, (consulté le 4 avril 2020)
  6. (en) Mark Otto, Jacob Thornton, and Bootstrap contributors, « Bootstrap 3 released », sur Bootstrap Blog, (consulté le 4 avril 2020)
  7. (en) Mark Otto, Jacob Thornton, and Bootstrap contributors, « Bootstrap 3.3.0 released », sur Bootstrap Blog, (consulté le 4 avril 2020)
  8. (en) Mark Otto, Jacob Thornton, and Bootstrap contributors, « Bootstrap 4 alpha », sur Bootstrap Blog, (consulté le 4 avril 2020)
  9. (en) Mark Otto, Jacob Thornton, and Bootstrap contributors, « Bootstrap 4 Beta », sur Bootstrap Blog, (consulté le 4 avril 2020)
  10. (en) Mark Otto, Jacob Thornton, and Bootstrap contributors, « Bootstrap 4 », sur Bootstrap Blog, (consulté le 4 avril 2020)
  11. (en) « Bootstrap 5 alpha! », sur Bootstrap Blog, (consulté le 4 septembre 2020)
  12. « Bootstrap 5 Material Design », sur MDBootstrap.com (consulté le 22 juin 2020)
  13. « HTML5 Boilerplate passe sous licence MIT, Bootstrap et JQuery mis à jour », PC INpact, (consulté le 20 mars 2014).
  14. a et b (en) « Twitter rolls out Bootstrap toolkit for developing web apps », zdnet.com, (consulté le 20 mars 2014).
  15. (en) « Dojo Bootstrap » (consulté le 15 avril 2014).
  16. (en) « UI Bootstrap » (consulté le 15 avril 2014).
  17. (en) « AngularStrap » (consulté le 15 avril 2014).

Voir aussi[modifier | modifier le code]

Articles connexes[modifier | modifier le code]

Liens externes[modifier | modifier le code]