Des moyens simples d'installer Bootstrap : 10 étapes (avec photos)

Table des matières:

Des moyens simples d'installer Bootstrap : 10 étapes (avec photos)
Des moyens simples d'installer Bootstrap : 10 étapes (avec photos)

Vidéo: Des moyens simples d'installer Bootstrap : 10 étapes (avec photos)

Vidéo: Des moyens simples d'installer Bootstrap : 10 étapes (avec photos)
Vidéo: TELECHARGER VIDEO TikTok, comment ENREGISTRER ou copier une vidéo TIK TOK sur son TELEPHONE 2024, Peut
Anonim

Ce wikiHow vous apprend à télécharger les fichiers Bootstrap sur votre ordinateur et à les lier à vos textes HTML pour utiliser les éléments Bootstrap dans votre code. Une fois que vous avez téléchargé et lié les fichiers Bootstrap, vous pouvez commencer à utiliser toutes les feuilles de style et les éléments JavaScript de Bootstrap dans votre conception Web.

Pas

Installer Bootstrap Étape 1
Installer Bootstrap Étape 1

Étape 1. Ouvrez le site Web Bootstrap dans votre navigateur Internet

Tapez https://getbootstrap.com dans la barre d'adresse et appuyez sur ↵ Entrée ou ⏎ Retour sur votre clavier.

Installer Bootstrap Étape 2
Installer Bootstrap Étape 2

Étape 2. Cliquez sur le bouton Télécharger

Cela ouvrira la page "Télécharger".

Installer Bootstrap Étape 3
Installer Bootstrap Étape 3

Étape 3. Cliquez sur le bouton Télécharger sous "CSS et JS compilés

" Cela téléchargera les fichiers Bootstrap complets sur votre ordinateur en tant qu'archive ZIP.

Si vous y êtes invité, sélectionnez un emplacement d'enregistrement pour le Bootstrap ZIP

Installer Bootstrap Étape 4
Installer Bootstrap Étape 4

Étape 4. Extrayez les fichiers de l'archive ZIP

Recherchez le fichier ZIP que vous venez de télécharger et double-cliquez dessus pour extraire tous les fichiers qu'il contient dans le même dossier.

  • Cela extraira deux dossiers nommés " css" et " js."
  • Si votre application de décompression n'extrait pas automatiquement les fichiers, consultez cet article pour voir toutes les façons dont vous pouvez exporter une archive ZIP.
Installer Bootstrap Étape 5
Installer Bootstrap Étape 5

Étape 5. Déplacez les dossiers extraits dans le même dossier que les fichiers HTML de votre site Web

Ouvrez le dossier qui contient tous les fichiers HTML de votre site Web et faites glisser le " css" et " js" ici pour les déplacer dans le même dossier que les documents de votre site Web.

Vous pouvez maintenant lier les fichiers à vos fichiers HTML et commencer à utiliser Bootstrap dans votre code

Installer Bootstrap Étape 6
Installer Bootstrap Étape 6

Étape 6. Cliquez avec le bouton droit sur le fichier HTML que vous souhaitez utiliser avec Bootstrap

Vous pouvez utiliser Bootstrap dans un seul de vos fichiers HTML, ou dans tous.

Installer Bootstrap Étape 7
Installer Bootstrap Étape 7

Étape 7. Survolez Ouvrir avec dans le menu contextuel

Un sous-menu apparaîtra avec les applications compatibles.

Installer Bootstrap Étape 8
Installer Bootstrap Étape 8

Étape 8. Sélectionnez votre programme d'édition de texte

Cela ouvrira le fichier HTML sélectionné dans votre éditeur de texte.

Vous pouvez utiliser un simple éditeur de texte comme Bloc-notes ou TexteModifier ainsi qu'un éditeur de code dédié comme Atome (https://atom.io) ou Coda (https://panic.com/coda).

Installer Bootstrap Étape 9
Installer Bootstrap Étape 9

Étape 9. Ajoutez les liens Bootstrap à l'en-tête de votre fichier HTML

Avant d'utiliser le code Bootstrap dans votre code HTML, vous devrez taper ou coller les lignes ci-dessous dans l'en-tête de votre code:

Si vous souhaitez lier et utiliser certains des autres fichiers des dossiers css et js, ajoutez simplement de nouvelles lignes dans l'en-tête et remplacez les parties css/bootstrap.css et js/bootstrap.js par les noms des fichiers souhaités lier

Installer Bootstrap Étape 10
Installer Bootstrap Étape 10

Étape 10. Vérifiez l'emplacement de vos liens Bootstrap dans le code

Dans l'en-tête du HTML, les deux lignes doivent être situées entre les lignes et la ligne.

  • Une fois que vous avez ajouté ces lignes à l'en-tête, vous pouvez commencer à utiliser les éléments Bootstrap dans ce fichier HTML.
  • Vous pouvez trouver une liste complète de tous les éléments Bootstrap sur https://getbootstrap.com/docs/4.3/getting-started/introduction. Cliquez simplement sur n'importe quelle catégorie comme Disposition ou Composants dans le menu de gauche.
  • Une fois que vous avez installé Bootstrap, vous pouvez insérer ou copier/coller n'importe quel morceau de code d'ici dans votre propre code.

Conseillé: