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 1954 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 L'informaticien

  le 23/03/2019

Telecharger Netflix Gratuitement et Légalement avec FREE NETFLIX DOWNLOAD

Dans ce tuto je vais vous montrer Telecharger Netflix Gratuitement et Légalement Pour PC, Mac, Android

Par L'informaticien

  le 10/05/2019

Récupérer ses Données Perdues de Clé USB/Disque Dur avec EaseUS Data Recovery

Dans ce tuto je vais vous montrer comment Récupérer ses Données Perdues de Clé USB/Disque Dur avec EaseUS Data Recovery Wizard

Par HFortier

  le 17/08/2019

Bitly, la meilleure alternative à Google url shortener ( goo.gl ) ?

Découvrons un raccourcisseur d'url pour remplacer Google URL Shortener, et voyons comment il fonctionne

Par L'informaticien

  le 03/01/2017

Télécharger et installer Kali Linux sur vmware worstation de A a Z

Salut Dans cette vidéo, je vais vous montrer comment télécharger et installer Kali Linux sur vmware worstation de A a Z.

Par L'informaticien

  le 25/01/2018

Comment vérifier l'état de santé de votre disque dur facilement

Salut tout le monde Dans ce tuto je vais vous expliquez comment vérifier l'état de santé de votre disque dur facilement

  Rejoins la communauté !


Tuto Aléatoire