Démarrer avec Bootstrap4

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 version 4  de la bibliothèque.

Dans cette leçon, vous allez apprendre comment télécharger la version 4 de Bootstrap et la bibliothèque jquery, vous découvrirez les éléments présents dans le package de Bootstrap4 et ensuite vous apprendrez comment charger Bootstrap4 et jquery sur une page HTML*

*Téléchargement de Bootstrap4

Nous allons télécharger Bootstrap4 sur le site getbootstrap.com (le site officiel de Bootstrap). Voici comment se présente l’interface du site à l’heure actuelle où j’écris ces lignes.

Démarrer avec Bootstrap

Le bouton de téléchargement présent dans la barre de navigation et celui présent sur le corps de la page proposent ensemble la version 4.1.3  de Bootstrap.

Procédure de téléchargement de la version stable 4.0.0 de Bootstrap :

  • aller dans la barre de navigation et cliquer sur le premier des liens présents à droite de la barre de la barre de navigation, après le clic un sous-menu apparaitra avec pour contenu les différentes versions de Bootstrap.

Téléchargement de Bootstrap

  • Maintenant cliquer sur le lien ‘v4.0.0’ dans le sous-menu et vous serez redirigez sur la page de Bootstrap4. La page se présente comme ceci.

Page de présentation de Bootstrap4

  • Cliquer sur le bouton de téléchargement ‘Download’ qui se trouve à la fin de la barre de navigation, lorsque le téléchargement se termine vous récupérez une version compressée avec tous les éléments de la version stable 4.0.0 de Bootstrap.

*Le contenu du package de Bootstrap4

Décompresser le dossier Bootstrap4 que vous avez récupérez lors du téléchargement, dans le dossier décompressé nous avons plusieurs sous-dossiers et plusieurs fichiers, mais seul le sous-dossier nommé dist retiendra notre attention car c’est son contenu que nous avons besoin pour nos travaux.

Démarrer avec Bootstrap

Le dossier dist comporte un dossier css et un dossier 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 ‘’

Télécharger jquery

  • 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 ‘’

Télécharger jquery

  • 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 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), copier le dossier dist qui se trouve dans le package de bootsrap4 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.

editeur sublime text

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.

Cours précédent                                                                                             Cours suivant

Voir la table des matières

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.