Vous savez désormais que Bootstrap est une bibliothèque contenant des codes HTML, CSS et JavaScript qui utilisent la bibliothèque jquery. Vous savez aussi qu’avec Bootstrap vous êtes capable de créer une application web responsive et réaliser de jolis effets d’animation, maintenant que vous avez fait la découverte de la bibliothèque Bootstrap et vous savez à quoi elle sert, nous allons démarrer avec la nouvelle version de la bibliothèque qui est la version 4.1.3.
Dans cette leçon, vous allez apprendre comment télécharger Bootstrap et jquery, vous découvrirez les éléments présents dans le package de Bootstrap et ensuite vous apprendrez comment charger Bootstrap et jquery sur une page HTML.
* Téléchargement de Bootstrap
Nous allons télécharger Bootstrap sur le site getbootstrap.com (le site officiel de Bootstrap). Voici comment se présente l’interface du site.
Procédure de téléchargement de Bootstrap :
- Cliquer sur le bouton de téléchargement ‘Download’ présente sur la page et vous serez redirigez sur la page de téléchargement de Bootstrap qui présente les éléments contenus dans le dossier zippé et comment faire appel aux fichiers Bootstrap sur sa page HTML depuis les serveurs de Bootstrap
* Le contenu du package de Bootstrap4
Décompresser le dossier Bootstrap que vous avez récupérez lors du téléchargement, dans le dossier décompressé nous avons un dossier CSS et un autre nommé JS.
Contenu du dossier css :
- bootstrap.css: Ce fichier comporte toutes les classes de Bootstrap
- bootstrap-grid.css: Il renferme les classes de base du style de grille de Bootstrap, les flexboxs (les boîtes flexibles) et les styles d’alignement de Bootstrap
- bootstrap-reboot.css: cette feuille de style définit le comportement par défaut des éléments HTML.
Ces trois fichiers possèdent chacun un fichier minifié : bootstrap.min.css, bootstyrap-grid.min.css, bootstrap-reboot.min.css. Un fichier minifié est un fichier dépourvu des commentaires et des informations dont les navigateurs n’ont pas besoin, et il permet à une page web d’être chargé rapidement lorsque cette page l’incorpore.
Les feuilles de styles et leur fichier minifié possèdent chacun un fichier binaire de l’extension .map : bootstrap.css.map, bootstrap.min.css.map, bootstrap-grid.css.map, bootstyrap-grid.min.css.map, bootstrap-reboot.css.map, bootstrap-reboot.min.css.map.
Un fichier .map est un fichier binaire contenant des informations et des données de description géométriques des objets d’une table, dans le cas de bootstrap4 les fichiers bootstrap.css.map, bootstrap-grid.css.map, bootstrap-reboot.css.map permettent de retrouver l’emplacement original d’une ligne de code à partir du code minifié. Ces fichiers ne sont pas indispensables et nous n’en avons pas besoin pour nos travaux.
Contenu du dossier js :
- bootstrap.js: Fichier JavaScript contenant le code des composants bootstrap
- bootstrap.bundle.js: Ce fichier contient les codes du fichier bootstrap.js et les codes d’autres API (Autres fonctionnalités implémentés), je donnerai plus de détails sur ce fichier dans la section chargement de bootstrap4 sur une page HTML.
Tout comme les feuilles de style du dossier css, ces fichiers possèdent chacun un fichier minifié et un fichier .map, les fichiers minifiés possèdent eux aussi des fichiers .map.
* Téléchargement de jQuery
Certains composants bootstrap tels que les carrousels nécessitent la présence de la bibliothèque jquery pour bien fonctionner. Pour ce faire vous devez aller sur le site de jquery (jquery.com) pour télécharger la bibliothèque.
Etapes pour télécharger jquery :
- Aller sur la page d’accueil du site de jquery et cliquer sur le bouton ‘’Download jQuery v3.3.1 ‘’
- Après le clic vous serez redirigé sur une page ou on vous propose les différentes versions de jquery avec les fichiers .min et .map de chaque version. Cliquer sur le lien ‘’Download the compressed, production jQuery 3.3.1 ‘’
- Après avoir cliqué sur le lien ‘’Download the compressed, production jQuery 3.3.1 ‘’, vous serez dirigez sur une page contenant les codes de la bibliothèque que vous cherchez à télécharger, faites juste un clic droit sur la page et enregistrer la sur le bureau de votre ordinateur ou n’importe où avec le nom de jquery.
Page présentant les codes de la bibliothèque jQuery
Maintenant vous avez à votre disposition les éléments nécessaires pour créer une page web responsive. Nous allons maintenant les charger sur une page HTML.
* Chargement de Bootstrap4 et jQuery sur une page HTML
Vous avez besoin d’un éditeur de texte pour écrire les lignes de code. En ce qui me concerne j’utilise l’éditeur de texte Sublime Text pour coder en HTML, en CSS et en JavaScript.
Pour démarrer :
- créer un dossier et nommer le Projet Bootstrap4 (vous pouvez nommer ce dossier comme bon vous semble, mais il est préférable de lui donner le nom Projet Bootstrap4 pour être dans la logique du cours), renommé le dossier décompressé dist, copier le dossier et coller le dans le dossier que vous venez de créer (Projet Bootstrap4), ensuite aller là où vous avez enregistrer la bibliothèque jquery et copier la puis coller la aussi dans le dossier Projet Bootstrap4.
- Dans l’éditeur de texte créer une page HTML, nommer le html puis enregistrer cette page dans le dossier Projet Bootstrap4.
Remarque : Sur l’interface de Sublime Text (L’éditeur de texte que j’utiliserai pour tous les travaux tout au long du cours), vous remarquerez l’arborescence à gauche de l’éditeur, le dossier principal qui est Projet Bootstrap4, il contient respectivement le dossier dist (Conteneur des fichiers de Bootstrap4 à charger qui sont dispatchés dans les dossier css et js), la page index.html que nous avons créé ensemble et la bibliothèque jquery.
- Prochaine étape, la page index.html doit inclure la structure d’une page HTML :
<!DOCTYPE html>
<html lang=”fr”>
<head>
<title>Projet Bootstrap4</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
- Dans cette dernière étape nous allons charger Bootstrap4 et jquery sur la page index.html mais nous allons apporter quelques éclaircissements avant de continuer.
Il existe deux manières de charger Bootstrap4 sur une page HTML. La première manière est de faire appel à la bibliothèque via le CDN (réseau de diffusion de contenu) de Bootstrap, c’est-à-dire qu’on fait appel à Bootstrap4 depuis les serveurs de Bootstrap.
L’avantage est que la page est légère et a un temps de chargement très rapide, le désavantage est qu’on ne peut pas travailler hors connexion, pour avoir accès aux composants de la bibliothèque il faut se connecter à internet.
La deuxième manière est celle que nous ferons dans ce cours, il s’agit de charger manuellement Bootstrap4 sur la page HTML. L’avantage est que vous pouvez travailler en local, vous avez accès directement aux composants de la bibliothèque sans se connecter à internet mais le désavantage est que la page est un peu lourde à charger.
Maintenant chargeons Bootstrap4 sur notre page index.html :
<!DOCTYPE html>
<html>
<head>
<title>Projet Bootstrap4</title>
<meta charset="utf-8">
<!-- Cette ligne spécifiée permet d'avoir un rendu net de cette page sur les écrans tactiles des petits supports -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Inclusion de la feuille de style principale de Bootstrap4 -->
<link rel="stylesheet" href="dist/css/bootstrap.css">
</head>
<body>
<!-- Inclusion de la bibliothèque jquery -->
<script src="jquery-3.3.1.min.js"></script>
<!-- Inclusion du fichier JavaScript de Bootstrap4 -->
<script src="dist/js/bootstrap.bundle.js"></script>
</body>
</html>
Remarque : Vous remarquerez que pour l’appel du fichier JavaScript de Bootstrap4, j’ai fait appel au fichier bootstrap.bundle.js et non bootstrap.js. C’est fait exprès pour la raison suivante :
Le fichier bootstrap.js en plus de jquery a besoin du plugin Popper.js pour que certains composants puissent fonctionner, ainsi le fait d’inclure le fichier bootstrap.bundle.js me permet de ne plus inclure le plugin Popper.js. Car le fichier bootstrap.bundle.js comporte tous les codes de bootstrap.js et tous les autres fonctionnalités dont les composants JavaScript de Bootstrap ont besoin pour bien travailler.
NB :
Après avoir découvert Bootstrap, comment la télécharger et la charger sur une page HTML, il est primordial que vous sachez le mode d’utilisation de la bibliothèque avant que nous ne continuons le reste du cours.
Pour utiliser Bootstrap, vous allez faire appel à une classe spécifique contenue dans sa feuille de style sur l’élément HTML que vous voulez stylisez.
Exemple : Nous allons centrer un titre au milieu
<h1 class= "text-center"> Mon titre</h1>
.text-center est une classe Bootstrap qui permet de centrer du texte.
Télécharger le livre : Prise en main de Bootstrap 4
