Enfilez vos bottes,
et commençons avec Bootstrap.
Je suis sûr que vos doigts démangent pour mettre vos mains autour de Bootstrap.
Alors, première étape, allez
aux instructions d'exercice qui suivent cette vidéo
dans votre page de cours Bootstrap sur Coursera.
Et puis dans les instructions,
vous verrez un lien vers ce fichier Bootstrap4-starter.zip.
Téléchargez le fichier zip sur votre ordinateur.
En outre, les instructions étape par étape qui sont illustrées dans cette vidéo
seront également données dans les instructions d'exercice qui suivent cette vidéo.
Là, vous aurez accès à l'un des extraits de code dont vous avez besoin pour cet exercice.
Ce serait également le cas pour tous les exercices à l'avenir.
Donc, si vous avez besoin de mettre la main sur les extraits de code,
c'est là que vous les trouverez.
Une fois que vous avez téléchargé le fichier zip,
déplacez ce fichier zip à un emplacement pratique sur votre ordinateur.
Donc, ici, je l'ai déplacé dans un dossier nommé Coursera sur mon ordinateur,
et puis j'ai le fichier zip avec ce nom long là-bas.
Décompressez simplement le fichier.
Une fois que vous décompressez le fichier,
vous trouverez un dossier nommé Bootstrap4 créé sur votre ordinateur.
Dans le dossier Bootstrap4,
vous verrez un autre dossier nommé Confusion, là.
Allez dans le dossier Confusion et vous y verrez deux fichiers,
index.html et fichier package.json.
Maintenant, ouvrez une fenêtre de commande ou
un terminal, puis déplacez vers ce dossier dans votre fenêtre de commande ou votre terminal.
À l'invite de commandes, tapez npm install.
Notez que j'ai déjà le fichier package.json dedans.
Donc, le fichier package.json est configuré de sorte que
la dépendance de développement lite-server soit installée si je tape npm install.
Ainsi, une fois que vous tapez npm install,
vous verrez que le lite-server sera installé dans votre dossier node_modules chacun.
Une fois cela terminé,
ouvrez ce dossier dans votre éditeur favori.
Une fois que vous avez ouvert le dossier dans votre éditeur,
créez un fichier .gitignore,
puis mettez node_modules dans le fichier gitignore et enregistrez.
C' est donc pour s'assurer que lorsque vous faites un gitcommit,
le dossier node_modules ne sera pas validé.
Après cela, il est temps d'aller chercher Bootstrap pour une utilisation dans notre projet.
Avant de récupérer Bootstrap,
faisons un commit de l'état actuel du fichier.
Donc, faites git init et initialisez votre dépôt git.
Ensuite, vous pouvez vérifier l'état git,
et vous verrez que ces fichiers doivent être validés,
ajoutez tous les fichiers,
gitcommit -m « Initial Setup ».
C' est donc le point de départ de votre dossier en ce moment.
Donc, avec cela, votre point de départ de votre projet web a été maintenant engagé dans git.
Maintenant, vous pouvez configurer ce git pour se synchroniser avec un dépôt en ligne,
comme nous l'avons dit dans les exercices git.
Ainsi, vous pouvez configurer un dépôt soit sur Bitbucket ou sur Github, puis
synchroniser ce projet avec ce dépôt git.
Notre prochaine étape est d'aller chercher Bootstrap.
Pour ce faire, ajoutez le type d'invite npm install bootstrap @4 .0.0 et aussi —save,
et laissez Bootstrap être installé.
Une fois Bootstrap installé,
nous nous rendons compte que nous devons également installer son homologue,
qui est jQuery ainsi que Popper.js.
Alors allons de l'avant et installez à la fois jQuery et Popper.js dans ce dossier de projet.
Donc, pour ce faire, ajoutez le type d'invite npm install
jquery @3 .3.1
et Popper.js @1 .12.9 —save.
Maintenant, chaque fois que j'installe l'un des paquets npm,
je spécifie explicitement la version du paquet que vous devez installer.
La raison en est que je veux m'assurer que pendant que vous passez par cet exercice,
toutes les étapes fonctionneront correctement.
Donc, je spécifie la version exacte des modules npm à installer.
Donc, ici, nous installons la version 3.3.1 de jQuery et Popper.js version 1.12.9.
Par la suite, aussi, je vais spécifier les versions exactes des modules à installer.
Alors allons de l'avant et installons ces.
Et une fois qu'ils sont installés,
nous pouvons passer à l'étape suivante.
En revenant à notre dossier de projet,
vous verrez que si vous allez dans node_modules,
vous verrez un dossier nommé Bootstrap.
Et dans le dossier Bootstrap,
vous trouverez un dossier nommé dist.
Donc, à l'intérieur du dossier dist,
vous trouverez deux sous-dossiers nommés CSS et js.
Si vous allez dans le dossier CSS,
vous trouverez tout un tas de fichiers CSS précompilés ici.
Celui qui nous intéresse au début est Bootstrap min.css.
C' est le fichier que nous allons inclure dans notre
fichier index.html afin d'utiliser Bootstrap dans notre projet.
De même, en allant dans le dossier js,
vous verrez qu'il y a un fichier Bootstrap min.js.
Nous allons inclure cela aussi dans notre index.htm.
Donc ce sera la prochaine étape que vous me verrez faire.
Avant de passer à l'étape suivante,
lançons notre serveur lite-afin que nous puissions voir les changements que nous apportons au
index.html immédiatement reflétés dans notre page web en temps réel.
Alors, commençons les serveurs Lite-server.
Donc, tapez le type d'invite npm start,
puis cela devrait démarrer votre lite-server.
Vous pouvez maintenant voir, à l'écran,
mon éditeur à gauche et la version actuelle de la page index.html à droite.
Donc, comme vous pouvez le voir,
j'ai déjà configuré la page index.html avec du contenu.
Cette page web ressemble à la page Web typique d'un professeur d'informatique.
Ouvrons maintenant la page index.html dans notre éditeur.
Et puis dans la partie tête de la page index.html,
juste avant le titre,
je vais coller un peu de code.
Cet extrait de code vous est donné dans les instructions.
Donc, vous pouvez simplement copier et coller cet extrait de code,
et je vais vous guider à travers ce que cet extrait de code essaie de faire.
Vous remarquerez que j'ai trois balises meta ici.
Le premier dit charset="utf-8".
Donc, c'est l'unicode qui va être utilisé.
La deuxième ligne qui dit meta name="viewport »,
je vais revenir et
vous expliquer cette ligne particulière dans la prochaine leçon quand nous allons regarder la conception web responsive.
Maintenant, permettez-moi d'attirer votre attention sur cette ligne particulière qui
dit lien rel="stylesheet », puis href.
Notez que je spécifie href comme « node_modules/bootstrap/dist/css/bootstrap.min.css ».
Donc, ce que je spécifie est que le fichier bootstrap.min.css,
qui contient les classes CSS correspondant à Bootstrap que nous avons
téléchargé en utilisant NPM dans notre dossier node_modules,
je vais l'inclure dans la tête de ma page index.html.
Vous devez donc inclure les classes CSS fournies par Bootstrap.
Vous devez également inclure les classes JavaScript fournies par Bootstrap,
ce que nous allons faire au bas de cette page.
Aller au bas de cette page, notez,
juste avant la balise de corps de fermeture,
je vais coller dans le code pour inclure tous les scripts là-bas.
Donc, pour ce faire,
je colle simplement dans les trois lignes pour que le script inclue le jQuery,
Popper.js, et aussi le Bootstrap min.js.
Et notez l'ordre dans lequel j'ai inclus ceci.
Donc le Bootstrap est en bas.
Ensuite, puisque Bootstrap dépend à la fois de jQuery et de Popper dans cet ordre,
donc je vais d'abord entrer jQuery.
Et puis après cela, nous entrons Popper, puis finalement,
Bootstrap min.js au bas du fichier index.html.
Maintenant, ceci est inclus au bas de la page.
Parce que lorsque vous chargez la page à partir d'un serveur Web,
vous voulez que les classes CSS soient chargées immédiatement afin qu'au fur et à mesure que la page commence
le rendu, lorsque le JavaScript est récupéré,
le JavaScript doit s'exécuter afin d'apporter des modifications
à votre page avec le code JavaScript,
et que prendra un peu de temps.
Donc, vous ne voulez pas que l'utilisateur attende que
la page entière soit chargée avant qu'il ne voit quelque chose dans sa fenêtre de navigateur.
C' est pourquoi nous chargeons normalement les classes JavaScript
vers la fin de notre page html juste avant le body tech.
Après avoir effectué ces modifications,
sauvegardons le fichier.
Maintenant, la raison pour laquelle je montre le
fichier index.html dans mon éditeur et aussi le navigateur juste à côté est, au
moment où vous enregistrez les modifications que vous avez apportées au fichier index.html,
notez comment le rendu du navigateur de ce fichier se
met immédiatement à jour et voyez Bootstrap déjà en action sur la page. À l'
heure actuelle, vous verrez que votre page utilise Times New Roman pour afficher tout le contenu.
Au moment où j'enregistre la page web,
vous remarquez que les polices utilisées sur votre page web ont changé.
Maintenant, votre page Web est configurée pour utiliser les classes Bootstrap,
et elle utilise la typographie par défaut Bootstraps pour afficher tout le contenu.
Bootstrap utilise par défaut Helvetica Neue pour la police.
Vous pouvez modifier la police par défaut pour bootstrap et ainsi de suite,
mais cela va au-delà de la portée de notre discussion en ce moment.
Donc, une fois que vous avez configuré votre page index.html et
que vous l'avez enregistrée, vous verrez immédiatement Bootstrap entrer en action dans notre page Web.
Donc, c'est comme ça que je vais continuer à illustrer,
comme nous ajoutons divers bootstraps, classes CSS
et composants à notre page Web,
comment le rendu de celui-ci dans notre navigateur va continuer à changer.
Maintenant, évidemment, le rendu de la page dans notre navigateur est toujours terrible.
C' est mieux que la page Web typique des professeurs d'informatique,
mais certainement pas lisible.
Nous devons maintenant mettre en œuvre les différentes classes CSS et
les composants JavaScript fournis par
notre infrastructure d'interface utilisateur Web Bootstrap afin de concevoir notre page Web.
Nous ferons donc cela étape par étape au fur et à mesure que nous poursuivrons cet exercice.
Cela peut être un moment pratique pour vous de faire une validation git
des modifications que vous avez faites afin qu'à la fin de cet exercice,
votre état de votre dossier de projet soit enregistré dans votre dépôt git.
Aller à mon dossier Confusion dans un autre onglet de ma fenêtre de terminal,
si je tape git status,
je vois maintenant que mon fichier index.html et le paquet du fichier JSON ont été modifiés.
Donc, je vais faire un commit.
Donc, maintenant, mon état
du dossier à la fin de cet exercice a été validé dans mon dépôt git.
Vous pouvez synchroniser cela avec votre référentiel en ligne afin que
l'état de votre projet soit sauvegardé à ce stade.
Avec cela, nous terminons notre premier exercice Bootstrap.
Vous avez maintenant vu comment nous pouvons configurer Bootstrap pour être utilisé dans notre projet web.
Au fur et à mesure que nous procédons
aux prochains exercices, nous allons utiliser les cours Bootstrap pour concevoir nos pages Web.