Comment ajouter Bootstrap à son site ?  

Partagé par GdArros le 15/08/2016  —  4 min de lecture

tutoriel-comment-ajouter-bootstrap-a-son-site
5 LIGHTS 1666 PERSONNES AIDÉES  

avatar GdArros   (Level 7)
Intérêt : Informatique

Ce tuto t'a aidé ? Partage-le !



Pré-requis pour ce tutoriel :

  • Un éditeur de texte
  • Un navigateur Internet
  • Avoir des notions de HTML


Dans ce tutoriel, nous allons voir comment installer/ajouter Bootstrap à son site web afin qu'il soit responsive.

Télécharger Bootstrap

Commençons par télécharger l'archive contenant le Graal.

Pour ce faire, rendez-vous sur cette page sur le site de Bootstrap. Puis, cliquez sur le bouton le plus à gauche : « Download Bootstrap ».

Le téléchargement de la dernière version de Bootstrap devrait démarrer. Si tout s'est bien passé, vous devez obtenir une archive .zip de Bootstrap.

Installer Bootstrap

Préparation

Bien, maintenant que nous avons l'archive, nous la « dé-zipons ». Pour cela, vous pouvez utiliser un logiciel comme WinRAR, ou laisser faire votre ordinateur qui a probablement déjà un dé-zipeur dans son système.

Une fois ceci fait, renommez le dossier que vous obtenez et appelez-le « bootstrap », comme ça vous aurez le même code que moi par la suite.

Enfin, placez ce dossier où vous le souhaitez dans l'arborescence de votre site. De préférence dans le même dossier que vos fichiers .css et .js existants (si vous en avez). Sinon, vous pouvez aussi créer un dossier nommé « lib » (pour « library ») dans lequel vous mettrez tous les outils que vous utiliserez pour votre site.

Lier le CSS

Nous allons maintenant ajouter les liens vers le CSS de notre dossier Bootstrap.

Tout ce que vous avez à faire c'est d'ajouter la ligne suivante dans votre balise <head> :

<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

Vous noterez que je suis parti du principe que vous avez placé votre dossier « bootstrap » dans le dossier « lib » dont nous parlions plus haut.

Nous venons de lier le CSS de Bootstrap mais si vous voulez utiliser toute la puissance de ce superbe outil, il va vous falloir lier aussi son JavaScript.

Lier le JavaScript

De la même manière que pour le CSS, ajoutons un lien vers le JavaScript de Bootstrap juste avant de fermer notre balise </body> :

<script src="lib/bootstrap/js/bootstrap.min.js"></script>

C'est aussi simple que cela.

Il ne nous reste plus qu'à ajouter jQuery à notre site puisque Bootstrap en a besoin. jQuery est une bibliothèque JavaScript qui permet de faciliter l'écriture des scripts.

Ajouter jQuery

Pour ajouter jQuery, nous n'avons même pas besoin de le télécharger. Nous allons simplement ajouter un lien vers le fichier .js qui est hébergée par Google. Nous allons placer la ligne suivante juste au dessus de notre lien vers le JavaScript de Bootstrap :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Et voilà c'est terminé, vous avez désormais la dernière version de Bootstrap installée sur votre site et totalement fonctionnelle !

Notez que la présence de ces liens est obligatoire dans toutes les pages où Bootstrap est appelé.

Récapitulatif du code

<html>
<head>
  <!-- Bootstrap CSS -->
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- jQuery link -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Bootstrap JS -->
  <script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

avatar GdArros   (Level 7)
Intérêt : Informatique

Ce tuto t'a aidé ? Partage-le !



Tu as toi aussi des astuces ou des compétences à partager ? Ou tu souhaites tout simplement apprendre ? Rejoins notre communauté en t'inscrivant !


Commentaires (0)

Connecte-toi ou inscris-toi pour rédiger un avis.

Lis aussi . . .

Par chhh

  le 22/07/2018

Comment avoir youtube ReD

je montre comment avoir youtube red gratuitement A quoi sert ? Pas avoir de pub et telecharger les video et autre

Par L'informaticien

  le 29/11/2017

Comment convertir Apple Music vers MP3

Salut Dans cette vidéo, je vais vous montrer Comment convertir Apple Music vers MP3

Par johnart23

  le 01/02/2017

RegJump - Aller directement à une clé de Registre en un seul clic

Dans ce tutoriel, vous allez apprendre comment aller directement sur une clé de registre avec regjump.

Par HFortier

  le 13/11/2016

Coder en h265 avec son GPU NVidia

Quel logiciel et options utiliser pour coder ses vidéos en h.265 avec ses GPU nVidia ? Suivez le guide :)

Par HFortier

  le 05/11/2017

Flash - Comment modifier le moteur de recherche par défaut de Microsoft Edge

Découvrez comment modifier le moteur de recherche par défaut de Microsoft Edge (ex Internet Explorer).

  Rejoins la communauté !


Tuto Aléatoire