WEBVTT

00:00:01.480 --> 00:00:06.259
Nous allons maintenant voir comment intégrer
Bootstrap à notre site via le CDN et ajouter

00:00:06.259 --> 00:00:08.460
du JavaScript à notre page.

00:00:08.460 --> 00:00:13.490
L'objectif est de comprendre comment utiliser
ces outils pour améliorer les fonctionnalités

00:00:13.490 --> 00:00:14.760
de notre site.

00:00:14.760 --> 00:00:19.619
Regardons ensemble : toujours dans la page
“Download” du chapitre “Getting Started”,

00:00:19.619 --> 00:00:22.980
descendons jusqu’au titre “CDN via jsDelivr”.

00:00:22.980 --> 00:00:28.699
Dans l’encadré nous pouvons observer l'attribut
href du lien, qui fait référence à une

00:00:28.699 --> 00:00:32.080
feuille de style qui nous connecte au CSS
minifié de Bootstrap.

00:00:32.080 --> 00:00:34.809
Et c'est exactement ce qu'est un CDN.

00:00:34.809 --> 00:00:37.880
Nous n'avons pas besoin d'inclure nos fichiers
dans notre projet.

00:00:37.880 --> 00:00:42.630
Nous établissons simplement un lien vers
un autre site qui héberge ces fichiers.

00:00:42.630 --> 00:00:49.260
Bien, maintenant, ouvrons notre éditeur de
texte et faisons un nouveau fichier.

00:00:49.260 --> 00:00:53.980
Enregistrons-le sur le bureau sous le nom
index.html.

00:00:53.980 --> 00:01:00.270
Et ouvrons-le dans notre navigateur.

00:01:00.270 --> 00:01:05.049
Évidemment, la page est vide pour l'instant,
puisque nous n'avons rien écrit.

00:01:05.049 --> 00:01:10.939
Commençons par ajouter les éléments de
base d’une page HTML, et intitulons-la "Bootstrap".

00:01:10.939 --> 00:01:18.450
Copions le lien CDN, qui dit : "nous voulons
les fichiers CSS et javascript de Bootstrap".

00:01:18.450 --> 00:01:23.790
Ces fichiers sont nécessaires si nous souhaitons
utiliser certaines fonctionnalités de Bootstrap,

00:01:23.790 --> 00:01:28.680
comme les menus déroulants ou les modèles
qui ajoutent des actions à nos sites web.

00:01:28.680 --> 00:01:33.460
Allons-y, copions ce lien et plaçons-le là
où nous souhaitons insérer du JavaScript.

00:01:33.460 --> 00:01:38.560
Lorsque nous arriverons à la section JavaScript
de cette formation, nous en discuterons plus

00:01:38.560 --> 00:01:39.560
en détail.

00:01:39.560 --> 00:01:44.439
Pour l'instant, il est important de noter
que ces fichiers JavaScript doivent se charger

00:01:44.439 --> 00:01:46.250
après le contenu de notre site.

00:01:46.250 --> 00:01:49.820
C'est pour cela que nous le plaçons en bas
de notre balise "body".

00:01:49.820 --> 00:01:54.659
De cette façon, notre site se charge d'abord,
puis les scripts sont téléchargés.

00:01:54.659 --> 00:01:59.360
Si nous les mettons en haut de la page, le
visiteur devra attendre que tout soit chargé

00:01:59.360 --> 00:02:00.930
avant de voir notre site.

00:02:00.930 --> 00:02:03.539
Et évidemment, ce n'est pas ce que nous voulons.

00:02:03.539 --> 00:02:07.220
Et voilà, c'est tout ce dont nous avons besoin
pour que Bootstrap fonctionne.

00:02:07.220 --> 00:02:11.870
On se retrouve dans la prochaine vidéo où
nous jouerons avec Bootstrap pour ajouter

00:02:11.870 --> 00:02:16.140
divers éléments à notre site, comme une
barre de navigation et une fenêtre modale,

00:02:16.140 --> 00:02:17.560
puis personnaliser leur apparence.