Django - 4.1 Introduire Bootstrap dans une page HTML
Bootstrap est une bibliothèque front-end très populaire pour créer des sites réactifs, qui s'adaptent aux mobiles comme aux ordinateurs. Cette leçon montre comment l'intégrer à une page HTML. Il suffit d'ajouter sa feuille de style et, si besoin, son script JavaScript.
Ajouter la feuille de style
Copiez le lien de la feuille de style CSS de Bootstrap dans la partie head de votre page HTML.
La page doit aussi commencer par la déclaration HTML5 et contenir une balise meta viewport, pour un affichage adapté aux appareils mobiles.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<lien-css-bootstrap>">
</head>
<body>
</body>
</html>Ajouter le JavaScript
Certains composants de Bootstrap ont besoin de JavaScript pour fonctionner. Copiez le lien du script et placez-le juste avant la balise de fermeture body, à la fin de la page.
En résumé
Bootstrap s'intègre en deux étapes : la feuille de style dans l'en-tête, puis le script à la fin du body. Le modèle de départ doit contenir la déclaration HTML5 et la balise meta viewport. Cette base servira pour toutes les leçons suivantes.
Points clés
- Bootstrap sert à créer des sites réactifs, adaptés aux mobiles.
- La feuille de style CSS se place dans la partie head.
- Le script JavaScript se place juste avant la fermeture de body.
- La déclaration HTML5 et la balise meta viewport forment le modèle de départ.
- Certains composants Bootstrap ont besoin de JavaScript pour fonctionner.
Questions fréquentes
Dois-je copier le JavaScript de Bootstrap ?
Oui, si votre page utilise des composants qui nécessitent JavaScript. Le lien se place juste avant la fermeture de la balise body.
À quoi sert la balise meta viewport ?
Elle indique au navigateur d'adapter la page à la largeur de l'écran, pour un comportement réactif sur mobile.
Où place-t-on le lien de la feuille de style ?
Dans la partie head de la page HTML, comme pour n'importe quel fichier CSS.