Bootstrap

Introduction

Présentation de Bootstrap

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 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 ainsi de garantir la compatibilité et homogénéité entre 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 menu de navigation, des fenêtres modales, formulaires, tableaux, etc.
• Éléments dynamiques : possibilité d'intégrer facilement des éléments dynamiques comme des carrousels d'images, tabs, alertes, etc.

Cadre d'utilisation

Grâce à sa modularité et flexibilité, Bootstrap peut être utilisé dans différents 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 plusiuers thèmes pour Wordpress basés sur Bootstrap par exemple)
• Etc.

Installation

Versions de Bootstrap

À présent (sept. 2014), Bootstrap est disponible dans la version 3.2. Dans des tutoriels ou pages web vous pouvez également trouver des références à des versions précédentes avec son nom de départ : Twitter Bootstrap. Aucune relation n'existe plus entre les créateurs et Twitter, donc le nom du framework est resté seulement Bootstrap.

La version 3.x est assez récente, donc souvent des sites ou templates utilisent encore la version 2.x. Les différences entre les deux versions ne sont pas énormes, bien que la version 3.x soit meilleure car le framework a été réécrit totalement. La différence plus importante concerne le design"responsive" :

• À partir de la version 3.x, les pages proposent automatiquement les comportements d'adaptation du layout (i.e. réactivité).
• Dans la version 2.x il faut inclure une feuille de style supplémentaire, car ses comportements ne sont pas proposés de base. La documentation pour la version 2.x est toujours disponible sous ce lien

Les exemples et références dans la suite de cette page concernent exclusivement la version 3.x du framework.

Les fichiers du framework

Bootstrap se compose de trois fichiers :

• bootstrap.css  : un fichier CSS avec les propriétés de style principales nécessaire à structurer la page et les Composants d'interface graphique
• bootstrap-theme.css : un fichier CSS supplémentaire, ou thème, qui ajoute des caractéristiques graphiques ultérieurs aux propriétés du fichier principal. Ce fichier n'est cependant pas obligatoire.
• bootstrap.js : un fichier JS qui permet l'intégration d'éléments dynamiques. Ce fichier est une extension de la bibliothèque jQuery qui doit également être incluse si on veut utiliser les éléments dynamiques.

Chacun des trois fichiers existe en deux versions :

• La version "normale", avec les noms illustrés plus haut, qui est utile dans la phase de développement pour avoir une référence au code utilisé par le framework
• La version "minified", avec le suffix ".min" inséré avant l'extension du fichier (i.e. bootstrap.min.css, bootstrap-theme.min.css, et bootstrap.min.js). La version "minified" présente exactement le même code de la version "normale" mais sans retours à la ligne ou tabulations, ce qui réduit la taille des fichiers. Pour cette raison, il est bien d'intégrer les versions "minified" dans les pages.

Comment obtenir les fichiers du framework

Bootstrap met à disposition plusieurs modalités d'intégration dans une page HTML.

Bootstrap CDN

Les fichiers qui composent le framework sont disponible à travers un URL spécifique. Cet URL est mis à disposition par un réseau CDN (Content Delivery Network) optimisé selon la provenance géographique de la requête, ainsi de maximiser la vitesse de téléchargement. Cette méthode est la plus immédiate. Voici le code pour inclure chacun des fichiers (depuis la section "getting started" du site officiel de Bootstrap) :

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Vous pouvez remarquer qu'il n'y a pas de protocole au début des URL. Vous avez en effet la possibilité de spécifier soit le protocol http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css, soit la version sécurisée https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css.

Download des fichiers

Les fichiers sont disponibles pour le download sur le site officiel de Bootstrap sous ce lien. Le site met également à disposition le code source et une version avancée du code qui ne sera pas traitée dans cette page.

Download de Bootstrap (source: site officiel)

Le fichier .zip téléchargé se compose des trois dossiers contenant les fichiers suivants :

Fichiers du framework

Le dossier "fonts" est nécessaire pour les icônes que Bootstrap met à disposition.

Dans une page HTML qui se trouve au même niveau des dossiers, le code pour inclure chaque fichier "minified" serait le suivant :

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/bootstrap.min.js"></script>

Le download des fichiers est recommandé en phase de développement afin d'avoir à disposition une version du code facile à observer dans le cas qu'on nécessite d'une référence. De plus, disposer du fichier sur son propre ordinateur permet de développer aussi sans être connectés à internet.

Download d'une version personnalisée du framework

Sur le site officiel il y a même la possibilité de choisir sa propre configuration du framework à travers le lien du menu principale "Customize". Les options à choisir sont cependant très nombreuses et cette possibilité ne sera pas traitée dans cette page. Il reste néanmoins la possibilité de personnaliser les pages à travers l'ajoute d'une feuille de style personnalisée. Cette possibilité est traitée de manière détaillée plus bas dans cette page.

Page HTML de base

La section "getting started" du site officiel de Bootstrap suggère une structure de départ d'une page HTML5 (il est nécessaire que la page soit déclarée comme page HTML5 et non XHTML ou autre) qui est la suivante :

<!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Analysons les parties importantes de cette structure :

<!DOCTYPE html>
<html lang="en">
...
</html>

D'abord, le document doit être forcément une page HTML5 pour exploiter toutes les fonctionnalités de Bootstrap. On ne peut donc pas utiliser ce framework avec des pages XHTML. Vous pouvez par contre bien entendu changer l'attribut lang (ou même l'enlever, il n'est pas strictement nécessaire).

À l'intérieur de la balise head on trouve plusieurs éléments intéressants :

<meta name="viewport" content="width=device-width, initial-scale=1">

Cette balise sert pour ajouter la fonction de zoom dans les dispositifs mobiles, c'est-à-dire la possibilité dans les dispositifs touchscreen d'agrandir une zone de la page pour faciliter sa lecture. Vous pouvez désactiver cette possibilité en ajoutant d'autres valeurs au meta-tag "viewport", bien que cette fonctionnalité soit normalement très utile.

<link href="css/bootstrap.min.css" rel="stylesheet">

Cette balise, on l'a vu, sert pour intégrer les propriétés de style fournies par le framework. Comme vous pouvez le noter, le pointage au fichier .css est relatif, donc cette structure de page implique que les fichiers du framework soient téléchargés et mise en ligne avec le contenu de la page.

Ces scripts externes JavaScript servent pour garantir la compatibilité avec la version 8 de Internet Explorer. Si vous êtes sûr que vos pages seront utilisées avec des versions plus récentes, ces scripts ne sont pas strictement nécessaires au fonctionnement du framework.

Avant la balise de clôture de l'élément body on trouve deux références à des scripts JavaScript :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Le premier script est une référence externe à une version de la bibliothèque jQuery mise à disposition sur les serveurs de Google. Comme indiqué dans le commentaire du code et expliqué plus haut dans cette page, la bibliothèque est nécessaire pour le fonctionnement des interactions dynamiques du framework. L'intégration de la bibliothèque dans votre page peut se faire d'autres manières, par exemple avec une copie du fichier en local. Pour plus d'information, consultez la page de ce Wiki dédiée à jQuery.

Le deuxième script est le plugin que Bootstrap met à disposition pour l'intégration des éléments dynamiques. Ce script doit être placé après la bibliothèque jQuery. Comme dans le cas du fichier .css, encore une fois il s'agit d'une référence relative et donc le fichier bootstrap.min.js doit être téléchargé est mis en ligne avec le contenu de la page.

Ce template représente un bon point de départ mais n'est pas obligatoire. D'ailleurs vous pouvez noter que ce template n'utilise pas le fichier bootstrap-theme.min.css. Vous pouvez par conséquence vous créer votre propre template de départ selon vos besoins. La page doit cependant respecter ces contraintes :

1. Le document doit être une page HTML5 (donc commencer avec <!DOCTYPE html>
2. Au moins le lien au fichier boostrap.min.css est obligatoire pour la mise en page, mais les éléments dynamiques ne seront pas disponibles
3. La bibliothèque jQuery doit être incluse avant le ficheir bootstrap.min.js si on veut exploiter les éléments dynamiques du framework

Exemples de pages

Dans la page "Getting started" du site officiel sont présentés plusieurs exemples de templates qui sont utiles à la fois comme squelettes de départ pour une page et pour mieux comprendre l'utilisation des différents élément du framework.