"Hello world" sans installation
Objectif
Apprendre ce qu'est un CDN et à mettre en place BootstrapCDN
Mise en situation
Nous allons voir qu'il est possible de rapidement mettre en place Bootstrap sur nos projets grâce à son CDN. Mais, d'abord, nous allons découvrir ce qu'est un CDN.
Définition : CDN
CDN (Content Delivery Network), ou réseau de diffusion de contenu (RDC) en français, est un ensemble d'ordinateurs (serveurs) mettant du contenu à disposition d'utilisateurs.
Le contenu situé sur le serveur d'origine est copié sur les serveurs du réseau de diffusion de contenu. Dans notre cas, il s'agit donc des fichiers nécessaires à l'utilisation de Bootstrap, qui sont mis à disposition sur son CDN.
Grâce à ce dispositif, Bootstrap nous offre la possibilité d'utiliser sa solution à partir de son CDN, donc sans que nous ayons besoin de télécharger et de mettre en place "physiquement" ses fichiers sur nos projets.
L'avantage est que la mise en place est simple et rapide, mais il y a également des inconvénients : le fait de ne pas pouvoir modifier les fichiers puisque ceux-ci sont sur le CDN (il faudra donc écraser certains styles CSS en cas de besoin), ou le fait d'être dépendant du bon fonctionnement du CDN de Bootstrap. En effet, si celui-ci rencontre un problème, des lenteurs, ou n'est plus accessible, alors nos projets basés sur son CDN vont également être impactés, puisqu'ils ne pourront plus charger les fichiers de Bootstrap (bugs d'affichage, bugs JavaScript, etc.).
Pour éviter ces inconvénients et permettre plus de personnalisation, il est donc préférable de ne pas utiliser les CDN et d'installer manuellement Bootstrap sur nos projets, comme nous le verrons par la suite.
Méthode : Utiliser BootstrapCDN
Pour utiliser le CDN de Bootstrap, nous allons inclure les fichiers CSS et JavaScript dans notre code HTML comme nous le faisons pour nos propres fichiers, sauf que cette fois les chemins des fichiers pointent vers les serveurs de Bootstrap et non vers nos propres dossiers.
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.
La plupart des composants nécessitent du code Javascript pour fonctionner. Plus précisément, Bootstrap utilise ses propres plugins Javascript et Popper ( bibliothèque Javascript pour la gestion des info-bulles et popovers). Pour les activer, il faut inclure dans l'ordre le CDN de Popper, le CDN du Javascript de Bootstrap, notre propre Javascript si nous en avons et le tout juste avant la balise de fermeture du </body>.
Les chemins à inclure sont donnés sur les sites Bootstrap et BootstrapCDN qui sont en compléments de ce cours.
Exemple :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap (repl.it)</title>
<!-- Bootstrap CDN CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Our CSS --><link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello world</h1>
<div class="alert alert-success" role="alert">
Si vous voyez ce message en vert foncé dans un encart vert alors bravo, vous avez réussi à installer Bootstrap CDN !
</div>
<!—Popper CDN -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<!-- Bootstrap CDN JavaScript --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!-- Our JavaScript --><script src="script.js"></script>
</body>
</html>
Syntaxe : À retenir
CDN (Content Delivery Network), ou réseau de diffusion de contenu (RDC) en français, est un ensemble d'ordinateurs (serveurs) mettant du contenu à disposition d'utilisateurs.
Pour utiliser BootstrapCDN, on insère les liens CDN dans notre code HTML avant nos propres fichiers.