Présentation de Twitter Bootstrap

Logo Bootstrap : présentation du framework CSS édité par TwitterBootstrap est un framework destiné à 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.


Il permet de réaliser facilement des sites web en mode Responsive Web Design (RWD), c’est à dire automatiquement adaptables à la tailles des écrans de smartphones.
La personnalisation visuelle se fait avec le préprocesseur LESS, qui permet notamment d’utiliser des variables dans le CSS (puis avec le préprocesseur SASS depuis la version 4). Cela permet par exemple de facilement changer les couleurs dominantes d’un thème, sans rechercher dans tous le code CSS.

Pour démarrer avec Bootstrap.

Points forts du framework

  • gain de temps de développement
  • apport de robustesse dans l’architecture globale du code
  • framework appartenant à une grande société (Twitter)

Points faibles

  • c’est un framework, donc plus lourd à charger
  • un minimum d’apprentissage à prévoir

Historique des versions de
Bootstrap

4 versions majeures entre janvier 2012 et septembre 2020

septembre 2020

Bootstrap 5

La version 5 du framework apporte des améliorations comme l’utilisation des propriétés CSS personnalisées, une nouvelle apparence de la documentation, des formulaires mis à jour et autres. Bootstrap 5 supprime jQuery en tant que dépendance et apporte des changements et améliorations à JavaScript. Cette version supprime également le support d’Internet Explorer.

  • Abandon de jQuery et amélioration de JavaScript
  • Propriétés CSS personnalisées
  • Amélioration de la personnalisation des documents
  • API utilitaires
janvier 2018

Bootstrap 4

Bootstrap 4 profite d’une réécriture massive du code, et remplace le préprocesseur utilisé LESS par SASS.
Le support de CSS flexbox est également présent, et de nombreuses classes utilitaires et options de personnalisations ont aussi été ajoutées.

  • prise en charge des dernières versions de Google Chrome, Firefox, Internet Explorer, Opera et Safari (sauf sur Windows).
  • prend également en charge la dernière version de Firefox ESR.
  • abandon du support pour les systèmes IE8, IE9 et iOS 6.
août 2013

Bootstrap 3

La version 3 de Bootstrap a redessiné les composants pour utiliser le flat design, et une approche mobile-first.

  • flat design
  • approche mobile-first
janvier 2012

Bootstrap 2

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

  • prise en charge du Responsive Web Design
  • gestion des Glyphicons