Le cadre CSS appelé bootstrap est l'un des cadres largement utilisés pour créer et concevoir des applications Web. Il a des styles HTML, CSS et certains composants de conception JavaScript pour les formulaires, les boutons, la navigation et d'autres modules d'interface. Avant d'utiliser Bootstrap, il faut ajouter les liens CSS, JavaScript et JQuery requis.

Cet article décrira les méthodes sur la façon d'ajouter un bootstrap à un projet.

Comment ajouter un bootstrap à un projet?

Il existe deux façons d'ajouter un bootstrap à un projet:

• • Télécharger Bootstrap
  • Ajout de bootstrap à partir d'un CDN

Méthode 1: Télécharger Bootstrap

Si vous souhaitez héberger Bootstrap sur votre site Web, téléchargez Bootstrap à partir de son site officiel et suivez les instructions.

Méthode 2: Ajout de bootstrap à partir d'un CDN

Un réseau mondial appelé CDN ou Network de livraison de contenu cache la ressource statique pour un site Web du monde entier. Les ressources incluent des images, des vidéos, CSS et plus. Il facilite le temps du site Web en chargeant les fichiers statiques à partir du serveur CDN relativement proche. MAXCDN offre une prise en charge CDN pour JavaScript de bootstrap et CSS. jQuery doit également être inclus.

Implémentons un exemple pour créer une page Web à l'aide de bootstrap.

Exemple: créer une page Web à l'aide de bootstrap

Pour créer une page Web avec bootstrap, essayez les étapes suivantes:

Étape 1: Créez un fichier HTML

Tout d'abord, créez un fichier HTML et nommez-le avec l'extension ".html". Dans notre cas, nous avons nommé le fichier HTML "indice.html". Après l'avoir créé, ajoutez les éléments requis comme indiqué ci-dessous:

Étape 2: Ajouter le lien Bootstrap CSS requis

Maintenant, ajoutez le lien Bootstrap CSS requis à l'intérieur de l'élément «»:

Supposons que nous utilisons Bootstrap 4, alors visitez le site officiel de Bootstrap 4 et copiez le lien CSS vers la section HTML Head.

Bootstrap CSS

Étape 3: Ajouter les balises de script requises

Il existe plusieurs composants de bootstrap qui nécessitent JavaScript pour fonctionner correctement. Plus précisément, ils ont besoin de plugins jQuery, Popper et JavaScript. Pour les ajouter à votre projet, utilisez le «»Tags, juste avant le«”Tag de fermeture:

Note importante: La séquence des balises «» ne doit pas être modifiée, comme JQuery doit être placée en premier, JS et Third Popper.js.

Conseil bonus

Il existe un moyen simple et le plus simple d'inclure Bootstrap dans votre projet. Le modèle de démarrage peut être copié à partir du site officiel de bootstrap et collé dans votre projet.

Étape 4: Ajouter des éléments HTML

Nous avons réussi à ajouter les liens bootstrap nécessaires. Maintenant, ajoutez les éléments HTML pour créer une page Web. Par exemple, dans l'exemple en cours, ajoutez les éléments HTML à l'intérieur du «»Élément comme mentionné ci-dessous:

• • Tout d'abord, ajoutez un "»Élément pour créer une zone pour les éléments. Attribuez-le le «centre de texte" et "bg-info" Des classes.
  • À l'intérieur du «», ajoutez le «

    "Tag avec la classe"avance de texte”Pour spécifier une rubrique en couleur jaune.

  • Ensuite, incluez du contenu texte en utilisant le «

    " élément.

Html

Linuxhint

Linuxhint fournit les meilleurs articles et vidéos à des fins éducatives!

Les classes de bootstrap utilisées dans l'exemple mentionné ci-dessus sont expliquées ci-dessous:

• • Le "centre de texte»Class Center aligne le texte.
  • "bg-info»Ajoute une couleur bleue.
  • "bg»Applique la couleur jaune au texte.

Enregistrez le code et lancez-le dans le navigateur. La page Web ressemblera à ceci:

C'est ainsi que vous pouvez ajouter Bootstrap à votre projet.

Conclusion

Pour ajouter Bootstrap à votre projet, "Télécharger le bootstrap" ou "Utilisez Bootstrap CDN"Sont les deux options. Pour télécharger Bootstrap, visitez le site officiel et suivez le guide et si vous ne souhaitez pas le télécharger, utilisez-le via CDN. Pour ce faire, ajoutez le lien CSS à l'intérieur du «»Section du HTML et ajoutez les balises de jQuery, JavaScript et Popper.JS près de la clôture "" étiqueter. Ensuite, incluez les éléments HTML après la balise de départ du «" élément. Cet article a expliqué comment ajouter Bootstrap à un projet avec un exemple.