02 – Comment installer bootstrap 5 ?

Cette vidéo de formation Bootstrap vous montre comment installer bootstrap 5.

>> la classe CONTAINER

Bienvenue dans ce tutoriel où nous allons commencer notre formation sur Bootstrap. Dans cette vidéo, nous allons plonger dans le processus d’installation de Bootstrap. Je vous guiderai à travers la création d’un nouveau projet en utilisant Visual Studio Code et la configuration des fichiers nécessaires pour intégrer Bootstrap de manière transparente.

Création d’un Nouveau Projet

Pour commencer, lancez Visual Studio Code et créez un nouveau dossier pour votre projet de formation sur Bootstrap. Vous pouvez le nommer selon vos préférences. Une fois le dossier configuré, ouvrez-le dans Visual Studio Code.

Configuration du Fichier HTML

Dans Visual Studio Code, créez un nouveau fichier HTML pour servir de base à notre projet Bootstrap. Les conventions de nommage sont essentielles pour l’organisation, alors nommons ce fichier « 01-installation-de-bootstrap.html ». Commencez par configurer la structure HTML de base en utilisant le raccourci « ! ». Si vous êtes nouveau dans la manipulation HTML, je vous recommande de consulter mes précédents tutoriels HTML CSS pour suivre sans problème.

Configuration du Document

Ajoutons un titre à notre document HTML pour refléter son objectif. Nous le nommerons « Installation de Bootstrap ». Cela établit la clarté et nous aide à rester organisés tout au long du processus de développement.

Navigation sur le Site Web de Bootstrap

Pour installer Bootstrap, accédez au site officiel de Bootstrap à l’adresse getbootstrap.com. Vous y trouverez différentes méthodes d’installation. En faisant défiler la page d’accueil, vous trouverez une méthode simple impliquant une balise de lien. Copiez le snippet de balise de lien fourni.

Intégration de Bootstrap

Retournez dans Visual Studio Code et collez le snippet de balise de lien copié dans le fichier HTML dans la section head. Ce snippet sert de lien vers la feuille de style CSS de Bootstrap hébergée sur un réseau de diffusion de contenu (CDN). Une fois collé, enregistrez le fichier pour appliquer les modifications.

Vérification de l’Installation

Après avoir enregistré, prévisualisez le fichier HTML dans votre navigateur. Vous remarquerez des changements immédiats dans la typographie, indiquant que Bootstrap a été intégré avec succès. Bien que la balise de script pour l’intégration JavaScript soit également fournie, nous nous concentrerons uniquement sur le CSS pour ce tutoriel d’installation.

Exploration de la Documentation Complémentaire

Pour une compréhension plus approfondie de l’intégration de Bootstrap, consultez la documentation. Elle met l’accent sur l’importance de l’inclusion de la balise meta viewport pour le design responsive, un concept abordé dans les tutoriels HTML CSS précédents. De plus, elle décrit l’emplacement des balises de script pour l’intégration JavaScript, recommandant de les placer avant la balise body de fermeture.

Finalisation de la Configuration

Assurez-vous de mettre à jour la balise de titre en conséquence pour la cohérence et la clarté. Une fois toutes les modifications apportées, enregistrez le fichier HTML pour finaliser la configuration. Avec une simple action de copier-coller, Bootstrap est maintenant intégré à votre projet, simplifiant considérablement le processus de développement.

Conclusion

En conclusion, l’installation de Bootstrap est un processus simple qui améliore l’efficacité et l’esthétique des projets de développement web. Ce tutoriel a fourni un guide étape par étape pour intégrer Bootstrap dans votre projet en utilisant Visual Studio Code et une manipulation HTML simple. Restez à l’écoute pour les prochains tutoriels où nous explorerons les vastes possibilités de Bootstrap dans la conception et le développement web.