Salut, installer-bootstrap

Cela fait quelques jours que je me suis vraiment mis à Bootstrap, qui est à la base un framework développé par Twitter. J’avais commencé par suivre les exercices sur freecodecamp, qui constituent un très bon début mais j’avais besoin d’aller plus loin. J’ai donc récupérer un livre très complet que tu trouveras dans la bibliothèque: « Bootstrap 3, le Framework 100% web design », de Benoît Philibert.

Bootstrap est un framework très pratique et vaste qui permet de faire de la mise en forme directement en indiquant des classes CSS aux balises HTML. Je n’ai pas encore tout appris donc je ferais plusieurs articles sur Bootstrap, il y a beaucoup de choses à dire et ça m’évitera de faire des articles trop long. La première chose à faire est d’installer Bootstrap!

Installer Bootstrap

Il existe plusieurs types d’installations mais en ce qui me concerne j’ai testé les plus simples pour le moment:

  • l’utilisation du CDN,
  • le téléchargement de la version compilée.

Il faut savoir que Bootstrap propose plusieurs types de fichier en téléchargement,

  • la version compilée(minimisée),
  • la version complète permettant l’utilisation de LESS CSS (je ne connais pas encore donc je n’ai pas fait cette installation),
  • la troisième version permet un export plus simple de Bootstrap vers Rails(idem, je ne connais pas encore donc je n’ai pas utilisé ce dossier).

L’utilisation du CDN

Il est difficile de faire plus simple que cette installation. Un Doctorat en copier-coller suffit (non je déconne va pas à la fac pour ça!). Le CDN permet de ne pas télécharger Bootstrap. Il faut simplement copier le code qui est affiché sur cette page, et de le coller dans la partie HEAD de ta page HTML. Attention, j’imagine que si tu as plusieurs pages, il faut copier autant de fois le code… Pour le moment je n’ai fait que des pages seules, à voir donc…

Pour éviter les aller et retour avec le site de Bootstrap, je te laisse le code ici:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 

Lier ton site à Bootstrap

Le principe est le même que pour lier une page HTML à une feuille de style CSS, tu vas utiliser la balise link pour lier ta page HTML à Bootstrap. De plus il faut ajouter dans le body, en bas de page après ton code HTML, les balises permettant de relier ta page aux fichiers jQuery et Javascript. Ces fichiers s’ajoutent toujours à la fin pour ne pas ralentir le chargement de la page. Ton navigateur chargera donc en premier le HTML et le CSS, puis les animations et fonctions jQuery et Javascript.

Pour te permettre d’aller plus vite, je te laisse le DOCTYPE de base pour travailler avec Bootstrap. Attention à bien modifier les adresses des fichiers. Comme une feuille de style ou une image, tu dois noter précisément le chemin d’accès aux fichiers de Bootstrap. Je te conseille de simplifier, voire de modifier le nom du fichier Bootstrap que tu as téléchargé. En effet je me suis fait un peu peur en préparant cet article, rien ne fonctionnait à cause de ça. Le dossier s’appelle simplement bootstrap, on comprend très bien ce qu’il se trouve dans ce dossier. Il est peut être bon d’ajouter un commentaire dans la balise head pour indiquer la version que tu utilises.

Voici donc le prototype:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- BOOTSTRAP -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- cette balise demande à IE de ne pas utiliser son "mode de compatiblité", qui risquerait de casser la lecture du site. En gros, il dit a Windows: "laisse tombé je m'en occupe..." -->
      <link rel="stylesheet" href="boostrap/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: respond.js doesn't work if you view the page via file://-->

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
    <title>Premier pas avec Bootstrap</title>
  </head>
  <body>




    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="boostrap/js/bootstrap.min.js"></script>
  </body>
</html>

Ce DOCTYPE HTML est évidemment sur le site de Bootstrap. Il te faudra scroller jusqu’à la partie « BASIC TEMPLATE ».

C’est tout pour aujourd’hui, je crois que c’est la première fois que je fais aussi court, mais je pense aussi que c’est plus simple à lire!

J’espère que cet article t’aidera.

A bientôt pour les premières lignes de code avec Bootstrap!

Guillaume