« Bootstrap » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 97 : Ligne 97 :


===Page HTML de base===
===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 :
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 :
<source lang="HTML5">
<source lang="HTML5">
<!DOCTYPE html>
<!DOCTYPE html>
Ligne 131 : Ligne 131 :
  </html>
  </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).
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, évidemment, 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 :
À l'intérieur de la balise "head", on trouve plusieurs éléments intéressants :


  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.
Cette balise sert à ajouter la fonction de zoom dans les dispositifs mobiles, c'est-à-dire la possibilité dans les dispositifs "touchscreen" (écran tactile) d'agrandir une zone de la page pour faciliter sa lecture. Vous pouvez désactiver cette fonction 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">
  <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.
Cette balise, on l'a vu, sert à 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 mis en ligne avec le contenu de la page.


  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
Ligne 150 : Ligne 150 :
  <![endif]-->
  <![endif]-->


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.
Ces scripts externes JavaScript servent à 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 :
Avant la balise de clôture de l'élément body on trouve deux références à des scripts JavaScript :
Ligne 159 : Ligne 159 :
  <script src="js/bootstrap.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 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.
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.

Version du 19 octobre 2016 à 16:54

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

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.

Installation

Versions de Bootstrap

À présent (oct. 2016), Bootstrap est disponible dans la version 3.3.7. Dans des tutoriels ou des pages web, vous pouvez également trouver des références à des versions précédentes, avec son nom de départ : Twitter Bootstrap.

La version 3.x est assez récente, il arrive donc souvent que des sites ou des 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 la 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é de l'affichage).
  • Dans la version 2.x il faut inclure une feuille de style supplémentaire, car ces 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 supplémentaires 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, permettant 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. De cette manière, le protocole s'adapte automatiquement au protocole utilisé pour accéder à la page (http ou https).

Download des fichiers

Les fichiers sont disponibles en téléchargement 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 de 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 téléchargement des fichiers est recommandé en phase de développement afin d'avoir à disposition une version du code facile à observer, dans le cas où l'on a besoin 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 principal "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'ajout d'une feuille de style personnalisée. Cette possibilité est traitée de manière détaillée plus bas dans cette page.

Utilisation de bower

Il est également possible d'installer la dernière version du framework avec Bower avec la ligne de commande :

bower install bootstrap

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, évidemment, 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 à ajouter la fonction de zoom dans les dispositifs mobiles, c'est-à-dire la possibilité dans les dispositifs "touchscreen" (écran tactile) d'agrandir une zone de la page pour faciliter sa lecture. Vous pouvez désactiver cette fonction 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 à 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 mis en ligne avec le contenu de la page.


Ces scripts externes JavaScript servent à 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.

Exemples de composants graphiques (source: site officiel)

Structure de page "responsive" avec Bootstrap

Une des caractéristiques principales de Bootstrap est la possibilité de créer des designs "responsive", c'est-à-dire que les pages s'adaptent automatiquement à différents dispositifs et tailles d'écran. La réactivité de la page est rendue possible à travers un système de grille ("grid" en anglais) qui divise le contenu de la page en 12 colonnes, et à des propriétés CSS prédéfinies qui permettent d'afficher du contenu sur la base de la taille de l'écran.

Le système "grid" est possible grâce à la technique des media-queries introduite avec CSS3. Cette technique permet de définir les conditions d'applications du code CSS. C'est l'équivalent, plus ou moins, des structures de contrôle (if... else...) utilisées en programmation.

L'élément "conteneur"

Pout utiliser le système de grille et permettre à Bootstrap d'adapter le contenu, il faut d'abord utiliser un élément qui encadre le contenu, une sorte de "conteneur". Bootstrap met à disposition deux éléments conteneurs :

<div class="container"></div>

Ce conteneur a une largeur "fixe" en rapport à la taille de l'écran (exemple)

<div class="container-fluid"></div>

Ce conteneur a une largeur qui correspond toujours à la taille maximale de l'écran (exemple)

Veuillez noter que les éléments conteneurs ne peuvent pas être emboités, mais vous pouvez utiliser plusieurs éléments dans la même page. Vous pouvez également alterner entre éléments "fixes" et fluides dans le même document (exemple).

Différence entre container and container-fluid.

Le système de grille

Bootstrap divise le contenu d'un "conteneur" en 12 colonnes de largeur équivalente. Voici le caractéristiques de ce système de grille :

  • Le système de grille fonction exclusivement à l'intérieur d'un élément conteneur (voir plus haut)
  • Pour définir une structure en colonnes il faut avant définir une ligne avec une balise div de classe "row"
  • La largeur de chaque colonne du système de grille dépend de la largeur de l'élément conteneur
  • Il existe une taille minimale de la colonne, si cette largeur minimale est atteinte, le mécanisme "responsive" étalera automatiquement les colonnes sur plusieurs lignes
  • La taille minimale de la colonne dépend du type de classe de la colonne :
    • .col-xs-X : conçue pour les très petits écrans comme les smartphones (<768px)
    • .col-sm-X : conçue pour les petits écrans comme les tablettes (>768px)
    • .col-md-X : conçue pour les écrans normaux comme par exemple les ordinateur portables (>992px)
    • .col-lg-X : conçue pour les écrans haute résolution (>1200px)
  • Une colonne peut s'étaler sur un nombre de colonnes qui va de 1 à 11 (pour une colonne qui tient toute l'espace de la page il ne faut pas utiliser une ligne). Pour ce faire il faut définir à la fin de la classe le nombre de colonnes occupées :
    • class=".col-XX-1"
    • class=".col-XX-2"
    • ...
    • class=".col-XX-11"
  • Une ligne peut se compose de colonnes de différents empans, il faut que la somme soit 12. Si le total dépasse 12, les colonnes en plus seront automatiquement renvoyées à la ligne suivante
  • Il est possible de "sauter" des colonnes qui resterons vides, pour ce faire il faut ajouter la classe .col-XX-offset-X avec à la fin le nombre de colonnes à sauter (e.g. .col-md-offset-4)
  • Il est possible d'emboiter des colonnes à l'intérieur d'une autre colonne. À ce point la colonne "conteneur" devient à son tour un élément à 12 colonnes et le même principe sera appliqué.

Voici un tableaux récapitulatif, tiré du site officiel, des options des colonnes :

Les différents comportements des colonnes (source: site officiel)

Exemples du système de grille

Code de base

Voici un premier exemple pour définir deux colonnes de taille "moyenne" :

<div class="container">
     <div class="row">
          <div class="col-md-6">...</div>
          <div class="col-md-6">...</div>
     </div>
</div>

Il faut :

  1. créer un élément conteneur avec la class container ou container-fluid ;
  2. créer une ligne, avec la class row ;
  3. enfin on peut insérer à l'intérieur de cette élément autant de colonnes souhaités, chacune avec la notation : col-{xs | sm | md | lg}-{1 ... 12}

Différentes tailles des colonnes

Les différentes tailles des colonnes se réfèrent exclusivement à leur comportement par rapport à la taille de l'écran. La taille effective des colonnes (c'est-à-dire l'empan qu'elles occupent sur la page) dépend du nombre des colonnes de la grille sur lesquelles elles s'étalent.

Voici un exemple du comportement des différentes tailles des colonnes. Changez la taille de votre fenêtre du navigateur pour voir les différents comportements.

Bootstrap prévoit également la possibilité de définir un nombre de colonnes différentes en fonction de la taille de l'écran. Par exemple on peut imaginer un layout avec une colonne plus petite sur la gauche, et une colonne plus grande sur la droite. On ne veut pas cependant que la colonne sur la gauche devienne trop grande sur des écrans très larges. On peut donc dire à Bootstrap que cette colonne occupe :

  • 2/12 si l'écran est très large
  • 3/12 si l'écran est large
  • 4/12 si l'écran est petit
  • 5/12 si l'écran est très petit

La colonne de droite sera dimensionnée relativement à chaque taille de l'écran :

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-5">
      <h2>Petite colonne de gauche</h2>
    </div>
    <div class="col-lg-10 col-md-9 col-sm-8 col-xs-7">
      <h2>Large colonne de droite</h2>
    </div>
  </div>
</div>

Vous pouvez noter dans cet exemple (qui nécessite d'un large écran) que les deux colonnes n'occupent pas en proportion le même espace de l'écran en fonction de la taille de la fenêtre.

Comment choisir la taille des colonnes

Le choix de la taille des colonnes peut se faire sur la base de différents critères, même assez complexes. Pour des applications plutôt simples on peut utiliser des critères simplifiés :

  • S'il est important que deux colonnes s'affichent l'une à côté de l'autre, par exemple dans le cas d'une application drag and drop qui permet de traîner des éléments d'une colonne gauche à une colonne droite, choisir une taille pour dispositifs très petit (xs) ou petit (sm), de cette manière les colonnes resterons côte à côte même si la taille de la fenêtre est petite
  • S'il est important que le contenu de la colonne ne rétrécit pas trop, par exemple dans le cas d'une image, utiliser plutôt des colonnes moyennes (md) ou grandes (lg)

Montrer/Cacher sur la base de la taille de l'écran

Bootstrap met également à disposition des classes pour montrer ou cacher du contenu sur la base de la taille de l'écran du dispositif utilisé. Contrairement au système de grille, dans lequel le contenu s'adapte à l'écran, dans ce cas le contenu s'affiche ou ne s'affiche pas. Le tableau suivant, tiré du site officiel, montre les classes et leur comportement selon la taille du dispositif.

Classes CSS pour montrer ou cacher des éléments selon la taille de l'écran (source: site officiel)

Composants du framework

Le framework met à disposition plusieurs éléments qu'on peut insérer dans trois catégories :

  • CSS : éléments HTML utilisés souvent dans des pages web qui disposent déjà de propriétés de style préétablies (e.g. formulaires, tableaux, etc.)
  • Composants : combinaisons d'éléments HTML pour former des éléments fonctionnels dans une page (e.g. menu de navigation, alertes, etc.)
  • JavaScript : éléments qui ajoute des comportements dynamiques à la page (e.g. carrousels d'images, menu déroulants, etc.)

Le site officiel propose des instructions et des exemples utiles pour chaque composants disponible à travers le framework. Par la suite, les composantes principales seront illustrées avec une brève description de leur utilité et le lien à la documentation officielle.

CSS

Bootstrap propose des styles préétablis pour les éléments HTML dont l'utilité principale et de proposer du contenu textuel (ou images). Voici une liste non exhaustive :

  • Élements textuels : Bootstrap met à disposition des styles pour la plupart des éléments textuels (titre, paragraphes, liste à pouces, citations, etc.).
  • Code : mise en evidence de code, particulièrement utile dans les pages techniques (le résultat est similaire à ce wiki)
  • Tableaux : si on ajoute la classe "table" à la balise table on peut utiliser un style des tableaux préétabli. On peut ajouter la classe "table-striped" pour créer des lignes avec une couleur de fond alternée. La classe "table-bordered" ajoute par contre les bords aux cellules
  • Formulaires : les formulaires sont automatiquement stylés mais d'autres options sont disponibles, telle que l'option "form-inline" à attribuer à la balise form pour que les champs s'affichent côté à côté (utile par exemple dans un formulaire de login)
  • Boutons : en associant la classe "btn" aux balises a ou button on obtient des boutons stylés. On peut ajouter ensuite l'une de ces classes - btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link - pour changer la couleur du bouton. La taille du bouton peut être également changée grâce aux classes btn-xs, btn-sm ou btn-lg.
  • Images : si on ajoute la classe img-responsive à une image, elle va s'adapter automatiquement à la taille de l'élément qui la contient

Composants

Bootstrap propose des éléments qui peuvent être associés à d'autres éléments HTML5 afin de créer des combinaisons fonctionnelles. Voici une liste non exhaustive :

  • Icônes : sans utiliser une série d'images, mais grâce à une police spéciale, Bootstrap met à disposition un set d'icônes qui peuvent être insérées à l'intérieur d'autres éléments (paragraphes, titres, boutons, etc.). Pour ce faire, il suffit d'utiliser la balise span avec la classe "glyphicon" à laquelle on ajoute une classe spécifique pour l'icône. Par exemple pour obtenir l'icône d'une étoile on utilise le code
<span class="glyphicon glyphicon-star"></span>
  • Barre de navigation : des menus de navigation principale peuvent être ajouté à différents endroits de la page et même être fixé en haut ou en bas de la fenêtre afin qu'ils soient toujours visibles. De plus, les barres de navigation peuvent être facilement configurées pour qu'elles s'adaptent à l'écran des dispositifs mobiles.
  • Jumbotron : élément utile pour afficher du contenu important de la page. À son intérieur on peut ajouter un titre, un ou plusieurs paragraphes, des boutons, etc.
  • Alertes : messages contextuels qui permettent de fournir aux utilisateurs un feedback sur les actions entreprises ou à entreprendre
  • Panneaux : éléments qui permettent d'entourer le contenu dans une "boîte" à la quelle on peut ajouter une entête et/ou un footer

JavaScript

Grâce à une extension de la bibliothèque jQuery, Bootstrap met à disposition des développeurs quelques fonctionnalités dynamiques qui permettent une certaine interaction avec les composants du framework. Voici une liste non exhaustive :

  • Fenêtres modales : au lieu d'une nouvelle fenêtre popup du navigateur, on peut créer des messages qui se superposent sur le contenu de la page. Ces fenêtres peuvent être fermées facilement à l'aide de boutons.
  • Menu déroulants : on peut créer des menus à plusieurs niveaux grâce au mécanisme de déroulement. Ces menus peuvent être même intégrés dans les barres de navigation (voir plus haut dans la page)
  • Tabs : éléments qui permettent d'afficher et regrouper beaucoup de contenu dans un espace réduit de la page grâce à une division en "fiches" dont seulement une est affichées à la fois.
  • Info-bulle : mécanisme qui permet d'améliorer les informations contextuelles disponibles lorsqu'on laisse le curseur de la souris sur un élément
  • Carrousel : slideshow de contenu (texte et/ou images) qui défile à l'écran de manière régulière et rythmée, particulièrement utile pour la présentation de contenu spécial

À noter que souvent pour utiliser les comportements dynamiques il n'est pas nécessaire d'insérer du code JavaScript dans la page, mais il suffit de bien utiliser des noms de classes ou d'attributs HTML. Bien entendu, le code JavaScript peut être utilisé pour personnaliser les comportements.

Personnaliser Bootstrap

La manière la plus simple pour personnaliser Bootstrap est l'utilisation d'une deuxième feuille de style qu'on ajoute à la feuille de style de base. De cette manière les définitions des éléments dans la feuille personnalisée vont remplacer les définitions contenues dans la feuille de style de base. Maintenir le CSS de base intact a plusieurs avantages :

  • Le fichier s'étale sur des centaines de lignes de code, et sa modification peut donc être assez compliquée
  • Il est très difficile de modifier un fichier "minified", on devrait donc modifier - et par conséquent inclure - le fichier normal
  • Si une nouvelle version du framework est disponible, il faudra tout simplement remplacer le fichier sans perdre les définitions qui se trouvent dans le fichier personnel
  • Dans la feuille de style personnelle on peut également ajouter d'autres propriétés qui ne concernent pas les éléments du framework

Il est également possible d'insérer vos nouvelles propriétés de style à travers la balise <style> directement dans le <head> de votre page.

Démarche à suivre

D'abord il faut créer une feuille de style, c'est-à-dire un fichier avec extension .css. Si vous avez téléchargé les fichiers du framework, il est bien de placer ce fichier dans le même dossier css/ du fichier de base bootstrap.min.css. Vous pouvez appeler votre nouveau fichier comme vous voulez, pour cette démarche on l'appelra perso.css.

Ensuite, vous devez ajouter à l'intérieur de la balise head de votre page le lien à cette deuxième feuille de style. Il faut que le lien soit inséré après le fichier bootstrap.min.css, autrement les définitions personnalisées ne seront pas prise en compte. Il faudra donc avoir ce code :

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

À ce point il vous suffit de déclarer à l'intérieur du fichier perso.css vos propres définitions de style pour qu'elles soient appliquées aux éléments de base du framework. Pour ce faire vous avez le choix :

  • Vous pouvez remplacer les propriétés de style des éléments eux-mêmes, c'est-à-dire que chaque fois que vous allez utiliser cet élément il aura les nouvelles propriétés
  • Vous pouvez définir des nouvelles classes qui vont être ajoutées à l'élément particulier afin que seulement celui-là aura des propriétés différentes, mais si vous utilisez l'élément de base sans la classe supplémentaire, il apparaitra normalement

Pour savoir quelles sont les caractéristiques de chaque élément de base du framework il est bien de consulter la version "normal" du fichier bootstrap.css. Il est utile à ce propos de disposer d'un éditeur de texte qui permet de chercher à l'intérieur du code afin de rendre le processus plus vite.

Dans le fichier perso.css vous ne devez pas copier toutes les propriétés de base des éléments, mais seulement les propriétés que vous désirez remplacer. Toute propriété qui ne sera pas définie dans le fichier perso.css apparaitra telle qu'elle est définie dans le fichier bootstrap.css. En d'autres termes si l'élément qui vous intéresse a une couleur de fond rouge et le texte blanc, si vous déclarez seulement la couleur de fond en bleu, la couleur du texte sera encore blanc.

Exemple de personnalisation

Personnaliser le jumbotron

Les propriétés CSS de l'élément jumbotron, tiré du fichier bootstrap.css, sont les suivantes:

.jumbotron {
  padding: 30px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
}
.jumbotron h1,
.jumbotron .h1 {
  color: inherit;
}
.jumbotron p {
  margin-bottom: 15px;
  font-size: 21px;
  font-weight: 200;
}

Voici le résultat en image :

Style du jumbotron normal

Nous allons maintenant apporter quelques modifications à notre code personnalisé qui devra être ajouté à votre fichier CSS perso.css :

.jumbotron {
     color: #FFF;
     background-color: #000;
}
.jumbotron h1,
.jumbotron .h1 {
     color: #FF0;
}

Voici le résultat :

Style du jumbotron personnalisé

Thèmes Bootstrap

Il est également possible de trouver des thèmes déjà prêts. Dans ce cas il suffit d'ajouter le fichier .css du thème à votre page. Voici quelques ressources qui proposent des thèmes gratuits (il existe aussi des thèmes payants) :

Documentation

Site officiel en anglais

Le site officiel de Bootstrap offre des explications détaillées sur le fonctionnement du framework et propose des références approfondies pour les différents éléments disponibles. Voici une description des pages principales avec le contenu :

  • Getting started : informations utiles pour installer le framework, modèle de base, exemples de pages, informations sur la compatibilité, et autre.
  • CSS : illustration des principaux éléments statiques du framework tels que le système de grille, les tableaux, les boutons, les images, et autre.
  • Composants : les Composants sont des "groupes fonctionnels d'unités du framework qui permettent une certaine fonction, comme par exemples les menus déroulants, les barres de navigation, les alertes, et autre.
  • JavaScript : informations sur les éléments dynamiques disponible à travers le fichier .js tels que les carrousels, les tab, les fenêtre modales, et d'autre.
  • Customize : permet de créer une version personnalisée de Bootstrap (voir installation plus haut dans cette page)
  • Exposition : exemples de sites développés avec Bootstrap
  • Blog : informations sur le framework telles que nouvelles versions, et autre.

Traduction en français du site officiel

Une traduction en français du site officiel est également disponible. Si bien que ce lien soit présent aussi dans le site officiel, il est spécifié qu'il ne s'agit pas d'une traduction officielle et que les informations pourraient ne pas être mise à jour. Il est bien de se référer plutôt au site officiel.

Alternatives

Liste de framework front-end avec un fonctionnement similaire à celui de Bootstrap :

Liens