Bootstrap 4 - Installation

Bootstrap 4 est la version la plus récente de Bootstrap.
C'est un framework HTML, CSS et JavaScript et d'ailleurs le plus populaire pour le développement de sites Web réactifs. 

Bootstrap est une boîte à outils open source.
Nous allons voir dans ce petit tutoriel deux façons d'installer Bootstrap 4.

La méthode CDN

C'est une méthode généralement pratiquée par les développeurs car elle permet d'avoir accès efficacement aux librairies rapidement et directement à distance. Pour définir simplement un CDN, il s'agit d'un ensemble de serveurs permettant de diffuser du contenu comme par exemple des applications web.
Par ailleurs, précisons qu'il faut avoir internet pour que ça soit fonctionnel.

Sur la page d'accueil de Bootstrap 4, cliquez sur "Get Started". Ensuite, en bas de la page, vous avez un code de base (au niveau de Starter Template) : 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Eh beh, vous venez d'installer tout ce qui est nécessaire pour utiliser Bootstrap. En effet, dans la partie <head>, vous avez la référence (lien externe) à la feuille de styles Bootstrap et juste avant </body>, vous avez les références aux scripts javascrit nécessaires.

La méthode manuelle

Cette méthode consiste à héberger vous mêmes les fichiers donc à les télécharger. Elle est un peu plus longue mais pas compliquée. Il suffit juste de les récupérer et de mettre dans votre code où les trouver. Dans l'exemple de code ci-dessus, on a les liens que je vous mets ici pour les télécharger directement (clic droit puis enregistrer le lien sous...) : 

bootstrap.min.css ( version 4.1.3 )
jquery-3.2.1.slim.min.js ( version 3.2.1 )
popper.min.js ( version 1.14.3 )
bootstrap.min.js ( version 4.1.3 )

Je vous remets le code avec la version manuelle : 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="jquery-3.3.1.slim.min.js"></script>
    <script src="popper.min.js"></script>
    <script src="bootstrap.min.js"></script>
  </body>
</html>

Dans ce code, il faut bien comprendre que les 4 fichers sont au même niveau que mon fichier html/php donc à vous de mettre le bon chemin selon votre organisation de fichiers.

Bienvenue dans le monde de Bootstrap

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2019 Lookman Design, tous droits réservés .