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 3081 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 CRFormations

  le 29/04/2020

[ Article vidéo] Résolution de l'image

Cet article vidéo répond à cette question : qu'est-ce que la résolution de l'image ?

Par proalot

  le 09/11/2016

Comment pivoter une vidéo sous Windows ?

Dans ce tutoriel, nous allons apprendre comment pivoter une vidéo et mettre l'écran dans le bon sens.

Par CRFormations

  le 31/10/2016

Paint.NET - Déplacez des objets d'une photo à une autre

Dans ce tutoriel vous allez apprendre à déplacer des objets d'une photo à une autre avec Pain.NET, un logiciel de retouche d'images gratuit.

Par ThibaudArros

  le 26/01/2017

Comment intégrer des icônes sur son site web avec la librairie Font Awesome ?

Découvrez comment intégrer la librairie d'icônes vectorielles Font Awesome sur votre site web en 2 minutes.

Par Clarisse

  le 22/07/2019

Les étapes indispensables dans la création d’application

Dans ce tutoriel vous allez apprendre les étapes indispensables dans la création d’application.

  Rejoins la communauté !


Tuto Aléatoire