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 1388 PERSONNES AIDÉES  

avatar GdArros   (Level 6)
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 6)
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 johnart23

  le 25/02/2017

Enlever le mot de passe de Windows Xp, 7, 8, 10 avec Hiren's boot cd 15

Dans ce tutoriel, vous allez apprendre à supprimer ou changer le mot de passe Windows (Xp à 10) avec Hiren's boot cd 15.

Par GdArros

  le 12/08/2016

Comment animer une progress bar en CSS ?

Dans ce tutoriel nous allons apprendre comment animer une progress bar en CSS facilement.

Par GdArros

  le 30/08/2016

Comment créer un lien d'abonnement à sa chaîne YouTube ?

Dans ce tutoriel nous allons voir comment créer un lien d'abonnement vers sa chaîne YouTube facilement et rapidement.

Par reyobadr

  le 11/03/2017

Avira Antivirus Pro 2017 avec clé de licence GRATUIT

Avira Antivirus Pro 2017 License key Full Version Free Download

Par HFortier

  le 25/08/2017

Flash - Modifier le moteur de recherche par défaut de Opera

Découvrez comment modifier le moteur de recherche par défaut du navigateur Opera, afin de le remplacer par le moteur de recherche de votre choix.

  Rejoins la communauté !


Tuto Aléatoire