"Hello world" avec installation

Objectif

  • Apprendre à installer Bootstrap manuellement

Mise en situation

Dans ce cours, nous allons apprendre à mettre en place Bootstrap manuellement sur nos projets, sans avoir recours au CDN.

MéthodeInstaller Bootstrap

Pour installer Bootstrap manuellement sur nos projets, nous allons télécharger le fichier ZIP contenant l'ensemble des sources (CSS, JavaScript, etc.).

Nous allons télécharger la version Compiled CSS and JS, car la version Source files nécessite des compétences supplémentaires (ex : compilateur SASS).

Une fois le fichier .zip téléchargé et décompressé, vous obtiendrez une arborescence comme indiqué ci-dessous :

Dans le dossier CSS :

Nous distinguons trois types de fichiers :

  • Les fichiers *.css : contiennent le code CSS lisible de Bootstrap.

  • Les fichiers *.min.css : contiennent le même code CSS de Bootstrap, mais ont été minifiés (linéarisation du code, suppression de l'indentation, etc.) afin d'améliorer les performances.

  • Les fichiers *.css.map : ces fichiers ne sont pas indispensables, mais lors des phases de debug ils vont nous aider à retrouver la ligne de code d'origine à partir du code du fichier minifié (via les outils de développement des navigateurs web).

  • Les fichiers .rtl servent quant à eux pour les langues dont la lecture se fait de droite à gauche(rtl = right to left).

Parmi les fichiers présents on trouve :

  • bootstrap-grid : contient uniquement les styles CSS pour les mises en page sous forme de grilles.

  • bootstrap-reboot : contient uniquement les styles permettant de redéfinir les styles par défaut des navigateurs pour un grand nombre de balises HTML.

  • bootstrap-utilities  : contient uniquement les styles permettant de définir les styles dit « utilitaires » qui vont être notamment les bordures, les couleurs, les ombres, les tailles de caractère, les positionnements…

  • bootstrap : contient l'intégralité des styles CSS en incluant les 3 fichiers précédemment cités. C'est donc ce fichier dans sa version minifiée que nous allons intégrer, car nous voulons l'intégralité des fonctionnalités offertes par Bootstrap.

Dans le dossier JS :

Concernant les fichiers JavaScript, il est à noter que le fichier Bundle est notamment utilisé pour les fonctionnalités dropdowns, popovers et tooltips qui dépendent de Popper.js (inclus dans le Bundle).

Comparatif fichiers JS, (source : site de Bootstrap)

Mise en place des différents fichiers :

  • Il faut inclure le CSS Bootstrap avant nos CSS afin de pouvoir bénéficier des styles prédéfinis avant de rajouter les nôtres.

  • Ensuite, nous pouvons inclure notre fichier JavaScript Bootstrap : nous allons mettre la version Bundle afin de disposer de l'ensemble des fonctionnalités.

Exemple

1
<!DOCTYPE html>
2
<html lang="fr">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6
  <title>Bootstrap</title>
7
  <!-- Bootstrap CSS -->
8
	<link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">
9
  <!-- Our CSS -->
10
  <link rel="stylesheet" href="style.css">
11
</head>
12
<body>
13
  <div class="container">
14
    <h1>Hello World !</h1>
15
    <div class="alert alert-success" role="alert">
16
      Si vous voyez ce message en vert foncé dans un encart vert alors bravo, vous avez réussi à installer Bootstrap !
17
    </div>
18
  </div>
19
20
  <!-- Bootstrap JavaScript -->
21
   <script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
22
  <!-- Our JavaScript -->
23
  <script src="script.js"></script>
24
</body>
25
</html>
Bootstrap Hello World
SyntaxeÀ retenir
Pour installer Bootstrap manuellement sur nos projets, nous allons :
  • Télécharger le fichier ZIP de Bootstrap et le décompresser dans notre projet.
  • Inclure le fichier CSS de Bootstrap dans notre fichier HTML, avant nos propres feuilles de styles.
  • Inclure le fichier JavaScript de Bootstrap avant nos fichiers JavaScript.
Complément
Bootstrap Download (Compiled CSS and JS)