Chapitre 2 : Installation
1. Méthodes d'installation
Il existe trois façons principales d'ajouter Bootstrap à votre projet :
- CDN (recommandé pour débuter) : Utiliser un lien direct vers les fichiers hébergés en ligne.
- Installation via NPM : Pour les projets professionnels avec des outils de build (Vite, Webpack).
- Téléchargement local : Télécharger les fichiers CSS et JS sur votre ordinateur.
- Comprendre les concepts clés de Installation et Configuration.
- Savoir appliquer ces concepts sur un cas concret.
- Éviter les erreurs fréquentes et adopter les bonnes pratiques.
Objectifs du chapitre
2. Installation via CDN
Ajoutez ces lignes dans votre fichier HTML :
CSS (dans <head>)
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
JS (juste avant </body>)
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
3. Le Template de base
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ma page Bootstrap</title>
<link href="..." rel="stylesheet">
</head>
<body>
<h1>Hello, Bootstrap!</h1>
<script src="..."></script>
</body>
</html>
Conclusion
Votre environnement est prêt ! Dans le prochain chapitre, nous allons découvrir le cœur de Bootstrap : Le système de Grille (Grid System).
Explication
Ce chapitre vous guide pas à pas sur le thème Installation et Configuration. L'idée est de partir d'une approche simple, puis de progresser vers des usages plus réalistes.
Exemple pratique
Essayez d'appliquer la notion vue ici dans un mini-exemple de votre projet personnel. Ensuite, comparez votre résultat avec les exercices associés pour valider votre compréhension.
À retenir
Maîtriser Installation et Configuration vous permettra d'aller plus vite dans les chapitres suivants.
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Comprendre les bases : Installation et Configuration
Atelier #1Expliquez avec vos mots le concept principal de ce chapitre, puis illustrez-le par un exemple simple.
Consulter la solution type du formateur
#2 — Application guidée
Atelier #2Réalisez un exercice pratique en reprenant la structure vue dans le cours et en modifiant au moins 2 paramètres.
Consulter la solution type du formateur
#3 — Mini défi
Atelier #3Concevez une petite solution personnelle liée à 'Installation et Configuration' et justifiez vos choix techniques.