- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans cette partie, on va voir comment mettre en place Bootstrap et les fichiers statiquespour créer un fichier style.css qui va nous permettre de styliser notre application.
00:00:09 :Donc tout d'abord, on va voir comment installer Bootstrap, on peut le faire très facilementen allant sur getbootstrap.com au moment où j'enregistre la vidéo, la version 5
00:00:18 :vient de sortir.Donc on peut cliquer sur Downloads ici et ce qu'on va faire nous, c'est l'incluredirectement via ce qu'on appelle un CDN, donc un Content Delivery Network.
00:00:27 :Donc on va pouvoir comme ça très facilement inclure le css de Bootstrap en sélectionnantcette première ligne ici, donc attention il y a deux lignes, il y a le fichier javascriptet le fichier css, dans notre cas on va uniquement utiliser le fichier css, donc je sélectionnecette ligne, je la copie et on va la mettre à l'intérieur de notre fichier index.html
00:00:46 :dans le head, donc à l'intérieur de cette balise head ici, après le titre, on va collertout simplement cette ligne et ça va nous permettre donc d'inclure le fichier de Bootstrap,donc le fichier css à l'intérieur de notre site pour pouvoir styliser notre application.
00:01:00 :Également on va donc créer un fichier statique, un fichier de css qui va nous permettre defaire quelques légères modifications nous-mêmes, donc d'écrire quelques lignes de code cssnotamment pour la barre de menu.
00:01:12 :Pour utiliser des fichiers statiques on va les mettre à l'intérieur d'un dossier,le dossier c'est très important qu'il s'appelle statique, donc on va le créer à l'intérieurde notre application Contacts, on va faire un clic droit New Directory et comme je vousdisais donc c'est très important comme pour le dossier de templates que ce dossier
00:01:27 :s'appelle statique, donc s-t-a-t-i-c, et à l'intérieur de ce dossier on va faireun dossier css, donc un sous-dossier css pour ranger nos fichiers statiques, dans ce cas-cion a un seul fichier donc on pourrait très bien le faire directement à l'intérieurde statique mais c'est quand même toujours une bonne idée de dès le départ bien organiser
00:01:43 :les éléments.Donc à l'intérieur du dossier css on va faire un nouveau fichier et on va l'appelerstyle.css, pour l'instant on ne va rien mettre dedans et on va juste l'inclure à
00:01:53 :l'intérieur de notre fichier html, donc pour ça il va déjà falloir qu'on utiliseune balise qui va nous permettre d'indiquer qu'on souhaite utiliser le tag statique,donc ça il faut le mettre tout au début de notre fichier, on va faire une accoladeet le pourcentage et on va dire load statique, et le fait de faire load statique ça va nous
00:02:10 :permettre d'utiliser cette balise statique pour charger notre fichier de css, donc pourcharger notre fichier de css on va faire une balise link comme celle-ci sauf qu'à la placede bootstrap on va aller chercher notre fichier css.
00:02:23 :Donc on fait une balise link, on tape link tabulation pour valider, la relation ici c'estbien un type stylesheet puisque c'est une feuille de style, et pour le href ici quiest le lien vers notre feuille de style on va utiliser la balise statique et on va mettrele nom donc le chemin en fait vers notre fichier css.
00:02:41 :Donc là c'est comme ce qu'on avait fait pour les url, il va falloir varier les guillemetspuisqu'on a des guillemets doubles ici, donc on va mettre un guillemet simple et on vaindiquer le chemin relatif à partir du dossier statique, dans ce cas-ci ça va êtrecss.style.css et on va fermer notre balise en mettant un nouveau symbole pourcentage
00:03:02 :et une accolade.Donc tout ça, ça va être remplacé automatiquement par le chemin vers notre fichier style.cssà l'intérieur du dossier statique.Pour faire un test on va tout simplement à l'intérieur de ce fichier modifier le bodyet on va changer la couleur de background, donc ça c'est quelque chose que je fais
00:03:17 :assez régulièrement pour vérifier que notre feuille de style est correctement chargée.On met un background color en red ici donc rouge et si on relance notre applicationet qu'on va voir sur notre site, on va se rendre compte assez rapidement si ça fonctionnedonc attention les yeux, on retourne sur notre site, on actualise notre page et là si ça
00:03:36 :fonctionne, voilà normalement on a le fond rouge qui apparaît, qui nous indique bienque notre fichier css est correctement chargé.Si vous n'êtes pas sûr vous pouvez également faire un clic droit allié dans inspect surgoogle chrome et en fait vous allez dans network ici trouver les fichiers qui sont chargés
00:03:51 :et si je relance l'application ici, si on clique sur all, on voit qu'on a bien doncnotre page, la page d'accueil qui est chargée, on a également le fichier feuille de stylede bootstrap donc là ça nous permet de savoir que ce fichier est également bien chargépuisqu'on a un code html ici donc le statut qui est égal à 200, 200 ça signifie que
00:04:09 :la ressource a été correctement trouvée et on a également notre feuille de stylestyle css et on remarque qu'on voit le chemin vers le dossier statique donc on astatic slash css slash style point css donc ça fonctionne parfaitement et dans les prochainesparties on va pouvoir commencer à styliser notre application avec notre feuille de style
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.