Bootstrap

De EduTech Wiki
Aller à : navigation, rechercher

1 Introduction

Bootstrap est un framework front-end (HTML5, CSS et JavaScript) spécialement conçu pour le développement d'application web "responsive", c'est-à-dire qui s'adaptent automatiquement à différents dispositifs et tailles d'écran (desktop, tablettes, smartphones, ...).

Les avantages principaux de Bootstrap sont :

  • Facilité et vitesse de développement : les éléments mis à disposition par Bootstrap permettent de créer en peu de temps des pages avec un layout soigné et moderne ;
  • Facilité d'installation : Bootstrap se compose seulement de deux fichiers à inclure dans le code d'une page HTML.
  • Composants disponibles "out of the box" : les éléments qu'on retrouve plus fréquemment dans une page (e.g. menu de navigation, boutons, etc.) sont déjà disponibles et facilement adaptables.
  • Design "responsive" : la structure de la page s'adapte automatiquement à différents dispositifs et tailles d'écran.

Pour utiliser Bootstrap une connaissance de base de HTML5 et CSS est suffisante. Une connaissance de base de JavaScript serait également utile pour exploiter toutes les caractéristiques du framework. Parmi les caractéristiques les plus importantes, on trouve :

  • Reset du code CSS : toutes les propriétés de style déjà prévues dans les navigateurs sont annulées, permettant ainsi de garantir la compatibilité et l'homogénéité entre les navigateurs.
  • Structure de la page : on peut créer facilement des mises en page modulaires, grâce notamment à un système de division de la page en grille.
  • Composants d'interface graphique : disponible "out of the box", ces éléments comprennent des menus de navigation, des fenêtres modales, des formulaires, des tableaux, etc.
  • Éléments dynamiques : possibilité d'intégrer facilement des éléments dynamiques, comme des carrousels d'images, des onglets, des alertes, etc.

1.1 Cadre d'utilisation

Grâce à sa modularité et sa flexibilité, Bootstrap peut être utilisé dans différentes situations. Il permet d'afficher des informations de manière structurée et sans trop d'effort, mais en même temps, il peut représenter la base pour la construction d'une interface complexe. Voici quelques exemples d'utilisation possibles :

  • Page ou site personnels
  • Page ou site de présentation d'un cours ou d'un projet de recherche
  • Page "conteneur" d'un jeu HTML5 ou Flash
  • Interface graphique d'une application web
  • Base pour un thème d'un CMS (il y a plusieurs thèmes pour WordPress basés sur Bootstrap par exemple)
  • Etc.

2 Versions

Les versions les plus utilisées à présent (septembre 2018) de Bootstrap sont les versions :