Bootstrap, installation et bases

Bootstrap est un des framework css les plus employés au monde. Il portait le nom de Twitter Blueprint en 2010 au moment de sa création, et a été conçu par deux développeurs gravitant autour de Twitter : Mark Otto et Jacob Thornton. En août 2011, Twitter place Bootstrap sous licence open source sur GitHub.
Bootstrap s’appuie sur SASS, un machinerie basée sur Ruby, mais on l’abordera ici par son biais le plus basique : des fichiers CSS et javascript dans des pages html.

Installer Bootstrap

Bootstrap peut s’installer de plusieurs manières, mais je vais privilégier ici la méthode pour travailler en local, avec le téléchargement de base, à partir du lien "Compiled CSS and JS" de la page de download
On obtiens ceci

A l’intérieur de ces dossiers, un ensemble de fichiers que vous n’aurez pas à ouvrir. C’est le principe du framework en général : on reçoit un ensemble de fichiers fonctionnels, qu’on ne va pas modifier, sauf pour les mettre à jour.

Puisque nous travaillons à partir de la version télécharger, nous devrons aussi télécharger jquery et popper.js, requis pour certaines fonctionnalités de Bootstrap. On les placera dans le dossier "js" qui est fait pour ça.

Préparer un fichier html de base

Il faut maintenant charger dans une page en html5 tous ces fichiers externes. Voici un code de base aménagé depuis les exemples du site de Bootstrap.
Pour un site déposé en ligne, la version "cdn" du code html est meilleure, mais je fais dans ce didacticiel le pari d’une connexion internet foireuse, et donc de fichier téléchargé en local.
Une feuille de style "macss.css" a aussi été ajoutée, pour permettre l’ajout de code css. Je la laisse au premier niveau du site pour plus de lisibilité.

<!doctype html>
<html lang="fr">
   <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="css/bootstrap.min.css">
       <link rel="stylesheet" href="macss.css">
       <title>Hello, world!</title>
   </head>
   <body>
       <h1>Hello, world!</h1>

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

Le dossier ressemble donc à ce stade à ça

Nous sommes prêts à démarrer.