Bootstrap est un Framework utilisé pour la conception de sites web adaptatifs ou “Responsive Web Design”.
Comment importer Bootstrap dans vos pages HTML ? Pour ce faire, vous avez deux solutions :
- Télécharger Bootstrap et importer les feuilles de styles (External style sheets) comme vous avez l’habitude de faire avec les feuilles de styles CSS.
- La deuxième solution est celle que nous allons voir en détail dans cet article (parce qu’elle est plus simple). En effet, il suffit d’importer le lien ci-dessous dans vos pages HTML.
Dans la partie “head” de votre page html, ajoutez la ligne suivante :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1
/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">Pour résumer, la ligne ci-dessus ajoute la feuille de style CSS de Bootstrap à votre page HTML.CSS de Bootstrap à votre page HTML.
Maintenant, afin que Bootstrap soit correctement importé dans vos pages html, il faut ajouter JavaScript à vos pages. Bootstrap utilise jQuery, Popper.js et leurs propres plug-ins JavaScript. Je tiens à vous dire que vous n’avez pas besoin de connaître JavaScript pour utiliser Bootstrap. Pour importer JavaScript dans vos pages, nous allons procéder de la même manière que pour les feuilles de styles. Il suffit de copier les lignes ci-dessous à la fin de vos pages HTML.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>Pour finir, votre page HTML peut ressembler à l’exemple ci-dessous.
