Tuto Bootstrap: Comment télécharger et installer Bootstrap
Bienvenue dans ce nouveau tutoriel Bootstrap
Après avoir expliqué le fonctionnement de Bootstrap dans l’article d’introduction de ce tutoriel, passons maintenant à la phase de téléchargement et d’installation du framework frontend le plus populaire. Par la suite, nous explorerons l’insertion des différents composants dans une page HTML.
L’installation de Bootstrap est très simple. Vous n’avez qu’à insérer dans vos pages HTML le code qui fait référence aux fichiers CSS et JS requis pour utiliser cette bibliothèque, en suivant quelques étapes préliminaires.
Comment télécharger et installer Bootstrap
Les fichiers de la bibliothèque Bootstrap peuvent être téléchargés et installés de trois manières principales :
- Vous pouvez télécharger la version précompilée du framework directement depuis le site officiel.
- Vous pouvez les importer via CDN (Content Delivery Network).
- Vous pouvez utiliser un gestionnaire de paquets tel que npm, RubyGems, Composer, etc.
Dans les exemples de ce tutoriel, j’importe souvent les fichiers via CDN, mais je vais également vous montrer comment télécharger et installer la version précompilée.
Pour télécharger la version précompilée de Bootstrap, rendez-vous sur getbootstrap.com, cliquez sur le bouton “Télécharger” pour accéder à la page de téléchargement, puis cliquez à nouveau sur le bouton “Télécharger” dans la section “Compilé CSS et JS”.
Si vous préférez les importer via CDN, vous devrez vous rendre sur la page de téléchargement (où vous pouvez également télécharger la version précompilée), mais dans ce cas, vous devrez copier et coller le code du paragraphe “BootstrapCDN” dans votre page HTML. Je vous montrerai où et comment faire cela plus tard dans ce tutoriel.
Installer Bootstrap
Après avoir vu où télécharger les fichiers nécessaires à l’intégration de Bootstrap dans notre projet, voyons maintenant comment l’installer.
Tout d’abord, Bootstrap nécessite le doctype HTML5 pour fonctionner correctement. Ainsi, chaque page HTML de votre projet devra commencer par ces balises :
Gardez également à l’esprit que Bootstrap a été développé en adoptant une approche “mobile d’abord”, ce qui signifie qu’il est optimisé pour les appareils mobiles et s’ajuste automatiquement en fonction de la taille de la fenêtre du navigateur. Pour garantir un rendu et un zoom tactile corrects pour tous les appareils, vous devez ajouter la balise méta responsive viewport à l’intérieur de la balise comme ceci :
Ajout des fichiers CSS et JS pour l’installation d
Lorsque vous avez téléchargé le package compressé contenant les fichiers de la bibliothèque précompilée, procédez comme suit :
- Créez un sous-répertoire dans le dossier principal de votre projet.
- Extrayez le contenu du package compressé dans ce sous-répertoire.
Le package précompilé est constitué de deux dossiers : l’un contient les fichiers de feuilles de style CSS, et l’autre contient les fichiers JavaScript.
Nous ne passerons pas en revue en détail l’ensemble de ces fichiers, mais nous nous limiterons à installer uniquement ceux dont nous avons besoin.
La première étape consiste à inclure le fichier “bootstrap.min.css” dans la balise <head> de chaque page, comme illustré ci-dessous :
<link rel="stylesheet" href="chemin-vers-le-fichier/bootstrap.min.css">Si vous préférez utiliser un CDN, le code à inclure est le suivant :
<link rel="stylesheet" href="lien-vers-le-CDN-de-Bootstrap">De nombreux composants de Bootstrap nécessitent JavaScript pour fonctionner, notamment jQuery et Popper.js. Ajoutez ensuite les balises :
<script src="chemin-vers-le-fichier/jquery.min.js"></script>
<script src="chemin-vers-le-fichier/popper.min.js"></script>
<script src="chemin-vers-le-fichier/bootstrap.min.js"></script>Si vous utilisez le package précompilé, vous pouvez également inclure le fichier “bootstrap.bundle.min.js” qui contient Popper.js, mais pas jQuery. Dans ce cas, le code à ajouter serait le suivant :
<script src="chemin-vers-le-fichier/bootstrap.bundle.min.js"></script>Ces étapes garantissent que vous avez correctement installé Bootstrap et qu’il est prêt à être utilisé dans votre projet.
Comme vous l’avez sûrement remarqué, Bootstrap utilise la version slim de jQuery, mais il prend également en charge la version complète.
Le modèle de départ pour Bootstrap
À ce stade, nous présentons le code complet requis pour chaque page HTML afin de tirer le meilleur parti de Bootstrap.
Veuillez noter que le chemin d’accès dans les attributs “href” et “src” peut varier si vous utilisez le package précompilé, comme expliqué précédemment.
Une fois notre page configurée avec tous les éléments essentiels, nous pouvons entamer l’ajout des divers composants de Bootstrap et commencer à créer une interface Web réactive.
Dans la section suivante, nous explorerons le fonctionnement des conteneurs et du système de grille.
Si vous avez besoin d’informations supplémentaires ou de clarifications, n’hésitez pas à nous contacter via notre page Facebook ou par e-mail.
Autres articles
