- 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 installer la librairie Bootstrap à l'intérieur de notre projet Django.Donc on va intégrer cette librairie dans notre fichier index.html.Alors Bootstrap, qu'est-ce que c'est ?
00:00:11 :C'est tout simplement une librairie qui va nous permettre de construire des interfaces un peu plus rapidementgrâce à pas mal de choses, notamment un système de grilles qui est déjà responsivequi va nous permettre d'afficher notre interface sur différents périphériquescomme par exemple un téléphone, une tablette ou un ordinateur
00:00:27 :avec donc un système de grilles qui va s'adapter en fonction de ses périphériques et de ses tailles d'écran.Et on a également pas mal de composants qui sont déjà construits avec un certain styledonc ce qui va nous faire gagner pas mal de temps.
00:00:38 :Dans notre cas, on ne va pas télécharger Bootstrap, on va juste inclure ce qu'on appelle le CDN.Donc on va en fait copier ce lien ici, CSS only.
00:00:45 :On ne va même pas installer ici jQuery et Javascript.On n'a pas besoin de ça pour la formation, on a juste besoin de la feuille de style.
00:00:52 :Donc on va copier cette ligne ici.Donc je sélectionne toute cette ligne de code, je fais clic droit, copie.Alors ce n'est pas en fait la meilleure façon de faire dans le cas d'un site, d'un vrai sitequ'on mettrait en ligne où on veut vraiment des bonnes performancespuisque forcément ici on va accéder à une ressource en ligne.
00:01:07 :Donc ça va en fait un petit peu ralentir notre site.Rien de bien méchant non plus, ne vous inquiétez pas, on ne va pas passer de 100 millisecondes à 5 secondesmais ça va quand même le ralentir un petit peu.
00:01:17 :Donc normalement ce qu'on ferait c'est qu'on téléchargerait Bootstrapet on l'inclurait en tant que fichier statique dans notre application Django.Pourquoi je ne montre pas ça ?
00:01:24 :Puisque en fait les fichiers statiques il y a quand même pas mal de choses à voirpour les faire fonctionner à la fois dans Django en localmais également quand on va mettre notre site web en ligne.
00:01:33 :Donc je ne veux pas passer juste une heure de la formation à vous expliquer les fichiers statiquessurtout que là on a vraiment juste une ligne de code à inclure.
00:01:40 :Donc comme je vous dis c'est vraiment le seul désavantage, ça va être un tout petit peu plus lent.Ce n'est pas la meilleure façon de faire en productionmais dans le cas de notre utilisation ici on va utiliser le CDN.
00:01:49 :Donc je copie ici cette ligne de code et je vais l'intégrer ici dans mon fichier HTMLdonc après la balise titre ici dans le head, donc dans ce tag headje vais coller cette ligne de code qui va donc intégrer mon fichier CSS de Bootstrap.
00:02:04 :Donc là vous voyez en fait qu'on va chercher tout simplement un fichier CSS en ligneet on va pouvoir du coup utiliser toutes les fonctionnalités de Bootstrapà l'intérieur de notre fichier index.html.
00:02:14 :Si vous voulez lire un peu plus sur Bootstrap vous avez la documentation qui est assez bien faite ici.Dans les prochaines parties on va voir quand même rapidement les principales choses que l'on va utilisernotamment donc le système de grille que vous pouvez retrouver ici dans Layout.
00:02:25 :Vous avez une explication de ce système de grille avec un autre onglet ici, Grid, qui va un peu plus en détail.Donc ça on va le voir dans la prochaine partie puisqu'on va l'utiliser dans notre application.
00:02:35 :Et vous avez aussi une liste ici de tous les composants qui ont été créés.Donc vous voyez qu'on a un style par défaut qui va nous faire gagner pas mal de temps.
00:02:41 :On va notamment utiliser des boutons dans ce chapitre avec là encore un style par défautqu'il est très facile d'appliquer sans avoir besoin d'écrire une seule ligne de CSS.
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.