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 1579 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 reyobadr

  le 21/03/2017

3D Youtube Downloader télécharger des vidéos YouTube

Programme gratuit pour télécharger des vidéos YouTube à la qualité et le format que vous voulez

Par CRFormations

  le 18/03/2017

Keepass : sécurité et mots de passe - PART 1

Si vous recherchez LE moyen de sécuriser vos mots de passe , essayez donc KEEPASS, voici 3 courtes vidéos explicatives pour le tester dès aujourd'hui.

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 24/09/2017

Récupérer les données supprimées d'un disque dur, usb, carte sd

Salut Dans cette vidéo, je vais vous montrer comment Récupérer les données supprimées d'un disque dur, usb, carte sd même après un formatage.

Par HFortier

  le 28/04/2018

30 astuces LightRoom pour être plus efficace (1/2)

Je vous propose de découvrir 30 astuces dans LightRoom concernant des fonctions et options que vous ne connaissez peut être pas.

  Rejoins la communauté !


Tuto Aléatoire