Temps de lecture approximative : 6 minutes
Chapitre 1 - Première page Bootstrap
Après cette rapide introduction, entrons dans le vif du sujet en démarrant notre première page Bootstrap 4. Il y a deux manières d'utiliser le framework : soit on télécharge les fichiers depuis le serveur officiel de Bootstrap, soit on utilise un CDN. Nous utiliserons cette dernière méthode dans ce cours.
Un CDN, ou réseau de diffusion de contenu en français, est un ensemble de serveurs reliés entre eux par internet dans le but de fournir du contenu, généralement statique. Dans notre cas précis, ils nous servent à utiliser l'ensemble du framework Bootstrap sans le télécharger, localement sur notre machine ou sur notre serveur. Cela a un côté pratique, par contre cela crée une dépendance vis-à-vis du CDN. En effet, si celui-ci ne fonctionne plus pour une quelconque raison, notre site ou application va se retrouver orphelin des contenus hebergés sur le CDN et va nécessairement en pâtir. Sans plus attendre, retrouvez ci-dessous le code minimal d'une page avec Bootstrap 4.
Code minimal d'une page web avec Bootstrap 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Titre de la page affiché dans la barre du navigateur</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="custom.css" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="custom.js"></script>
</head>
<body>
</body>
</html>Si le HTML vous est familier, vous comprendrez aisément la plupart du code ci-dessus. Si ce n'est pas le cas, je vous invite à commencer par le cours sur le HTML. Pour la partie un peu plus complexe, les explications sont ci-dessous.
Bootstrap 4 est donc composé : d'un fichier CSS et de trois fichiers JS. Le fichier CSS est propre à Bootstrap. Il contient l'essence même du framework. En ce qui concerne les fichiers JS, on retrouve le framework jQuery ainsi que la librairie Popper sur lesquels s'appuie Bootstrap. Bootstrap est donc dépendant de ces deux technologies. C'est d'ailleurs pour ça que le fichier JS propre à Bootstrap est chargé en dernier. Si on inverse la déclaration des fichiers JS, cela va produire une erreur. En effet, Bootstrap a nécessairement besoin de jQuery et de Popper pour fonctionner correctement. Il n'est pas primordial de connaitre jQuery et Popper pou utiliser correctement Bootstrap. C'est cependant un plus non négligable.
La balise inhabituelle que l'on rencontre est <meta>. La balise <meta> n'est pas intrinsèquement inhabituelle car on l'utilise entre autres pour définir l'encodage de la page avec l'attribut charset="". La combinaison des attributs et des valeurs de cette balise permettent de garantir un rendu correct et un zoom tactile sur les différents supports mobiles. En effet, Bootstrap permet de gérer l'affichage de son site ou de son application sur tous les supports, grâce au responsive design. Cette balise permet de faire fonctionner cette fonctionnalité correctement. Notons que Bootstrap est développé mobile first. Une stratégie sur laquelle nous reviendrons plus tard dans le cours.
Pour notre site ou application web, nous nous appuyons sur le framework Bootstrap. Cependant, nous souhaitons les personnaliser le maximum. La bonne pratique veut qu'on ajoute un fichier CSS (custom.css) et JS (custom.js) supplémentaire pour ne pas modifier les fichiers Bootstrap. En l'occurrence, étant donné qu'ils sont hébergés sur un CDN, la tâche aurait été compliquée. Vous l'aurez compris, ce sont les deux seuls fichiers en local du code minimal.
Nous sommes désormais prêts pour commencer à attaquer la version 4 de Bootstrap.
En somme, Bootstrap embarque un fichier CSS (monstrueux) qui met à disposition du développeur une série de classes à utiliser à bon escient.
