FontAwesome, une bibliothèque d'icônes emblématique, est...
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.
Les fichiers de la bibliothèque Bootstrap peuvent être téléchargés et installés de trois manières principales :
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.
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 :
Lorsque vous avez téléchargé le package compressé contenant les fichiers de la bibliothèque précompilée, procédez comme suit :
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.
À 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.
Quand on parle d’un mémoire de Master, on pense tout de suite au sujet, à…
Les rouages d’une entreprise se jouent rarement sous les projecteurs. Ce qui apparaît à l’extérieur…
Quand on prépare un mémoire, on consacre souvent l’essentiel de son énergie au plan, à…
Dans beaucoup d’entreprises, l’analyse financière commence souvent de la même manière : une pile de…
Télécharger une fiche méthode pratique et utile ⬇️ L’analyse de document en SVT fait partie…
Introduction En classe de 4ème, l’étude du récit occupe une place importante dans l’apprentissage du…
This website uses cookies.