Bootstrap

Bootstrap 4 : installation

Les fichiers de Bootstrap

Pour récupérer les fichiers de Bootstrap c’est simple : cliquez sur le bouton de téléchargement (download) sur le site de la librairie. Vous arrivez sur la page des téléchargements avec à disposition deux boutons :

  • « Download » : permet de récupérer juste les fichiers nécessaires au fonctionnement de Bootstrap.
  • « Download source » : permet de récupérer en plus tous les fichiers sources et la documentation.

Vous pouvez aussi aller consulter directement le code source sur github.

Quand vous téléchargez la librairie avec le bouton « Download source », vous obtenez un fichier zippé contenant un dossier qui contient lui-même un certain nombre de fichiers et de dossiers, comme le montre la figure suivante.

Les fichiers utiles pour simplement utiliser Bootstrap se situent dans le dossier dist (« distribution »), ce sont les seuls fichiers que vous obtenez si vous utilisez le bouton « Download ».

Il existe bien d’autres façon d’installer Bootstrap : npm, RubyGems, Composer, Nuget… selon les outils que vous utilisez pour développer. Consultez la documentation‌ pour les précisions concernant ces outils.

Voyons un peu les fichiers les plus importants :

  • bootstrap.css  comporte les classes de base de Bootstrap ;
  • bootstrap.js  contient le code JavaScript des composants de Bootstrap ;
  • bootstrap.bundle.js  contient le code JavaScript des composants de Bootstrap comme bootstrap.js mais en plus la librairie popper.js ;

Les fichiers « min » (bootstrap.min.cssbootstrap.bundle.min.js et bootstrap.min.js) contiennent le même code que leurs équivalents (bootstrap.cssbootstrap.bundle.js et bootstrap.js) mais ont été épurés des commentaires et compressés pour les alléger et accélérer ainsi leur chargement.

Je parlerai des fichiers grid et reboot dans des prochains chapitres.

Le dossier js/dist dans les sources contient les composants Javascript dans des fichiers séparés. Ils peuvent être pratiques si vous utilisez peu de composants en évitant ainsi de tout charger avec la librairie globale.

Les fichiers « map » (bootstrap.css.mapbootstrap.min.css.map…) permettent de retrouver l’emplacement original d’une ligne de code à partir du code minifié. Cette fonctionnalité est utilisable avec les dernières versions de Chrome et Firefox. Ces fichiers ne sont pas indispensables au fonctionnement de Bootstrap.

D’accord, mais que mettre sur un site pour que Bootstrap fonctionne ?

Il faut distinguer deux situations :

  • Pendant la phase de développement, il est intéressant de pouvoir naviguer dans le code de Bootstrap, il faut donc mettre les fichiers non compressés.
  • Lorsque votre site est en ligne, vous n’avez plus à vous inquiéter du code et seule compte la vitesse de chargement, il faut donc cette fois utiliser les versions compressées (min).

La figure suivante montre les fichiers utiles pendant la phase de développement (les fichiers bootstrap.js ou bootstrap.bundle.js et jquery.js ne sont à prévoir que si vous utilisez des plugins jQuery).

La figure suivante montre les fichiers utiles lorsque le site est en ligne (les fichiers bootstrap.min.js ou bootstrap.bundle.min.js et jquery.js ne sont à prévoir que si vous utilisez des plugins jQuery).

Dans les exemples de ce cours, je pars du principe que les répertoires css et js comportent les fichiers cités précédemment.

On verra lorsque nous aborderons l’aspect JavaScript qu’il est nécessaire d’ajouter la librairie popper.js ou d’utiliser la version bundle qui contient déjà cette librairie.

Intégration

Fichiers locaux

Pour que Bootstrap fonctionne il faut que les pages HTML soient au format HTML 5, il faut donc prévoir le bon DOCTYPE :

<!DOCTYPE html>
<html lang="fr">
  ...
</html>

Il faut ensuite déclarer au minimum le fichier bootstrap.min.css (ou bootstrap.css) dans l’en-tête de la page web :

<head>
        …
   <link href="/css/bootstrap.min.css" rel="stylesheet">
</head>

À partir de là toutes les classes sont accessibles… Évidemment vous devez adapter le lien selon la localisation de vos fichiers.

Si vous utilisez des composants JavaScript, vous devez également référencer la librairie de Bootstrap ainsi que jQuery (la librairie jQuery ne fait pas partie des fichiers téléchargés avec Bootstrap et doit être récupérée indépendamment sur http://jquery.com/). Il faut également prévoir d’ajouter la librairie popper qui est nécessaire pour certains plugins :

<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

Mais on peut aussi utiliser la version bundle qui inclut popper.js :

<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>

Les CDN

CDN est l’acronyme de « Content delivery network » ; c’est un réseau de serveurs qui met à disposition des librairies. Il devient ainsi inutile de les prévoir sur son propre serveur, il suffit de « pointer » vers eux. Il y a des avantages à utiliser un CDN :

  • Libération de ressources et de la bande passante sur son propre serveur ;
  • Parallélisation des téléchargements (un CDN est sur plusieurs serveurs) ;
  • Accélération du chargement ;
  • Diminution de la latence ;
  • Actualisation automatique des librairies ;
  • Amélioration du référencement…

Y-a-t-il des inconvénients ?

D’après certains, l’utilisation d’un CDN, qui impose une requête DNS supplémentaire, ne serait judicieuse que si l’on a beaucoup de librairies à charger. D’autre part si vous modifiez le fichier CSS de Bootstrap pour l’adapter à vos besoins, ce qui est très souvent le cas, vous ne pourrez plus bénéficier des avantages d’un CDN. Mais si vous voulez profiter de cette possibilité pour Bootstrap, utilisez de préférence bootstrapcdn. Vous pouvez évidemment utiliser un CDN également pour jQuery.

Si vous utilisez des CDN, l’installation en est d’autant simplifiée. Vous n’avez qu’à adapter les appels des librairies :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

…

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Bootstrap ne nécessite que la version « slim » de jQuery mais fonctionne parfaitement avec la version complète.

Une trame pour démarrer

La prestation minimale

Vous trouvez sur le site de Bootstrap ce template de base :

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Je me suis contenté de définir la langue française par rapport à l’original.

Pourquoi y a-t-il une attribut d’intégrité pour le chargement des fichiers par les CDN ?

Les CDN sont pratiques mais il faut être sûr de charger effectivement ce que l’on a demandé. Si un pirate modifie les fichiers du serveur on pourrait avoir des surprises. Le contrôle d’intégrité permet d’être sûr d’obtenir le bon fichier.

Dans le template on trouve cette ligne :

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Elle concerne uniquement les mobiles. On demande que l’affichage occupe tout l’espace disponible avec une taille de 1, autrement dit sans zoom. Vous pouvez aller encore plus loin en interdisant le zoom ou en le limitant à certaines valeurs.

On trouve ensuite les déclarations que nous avons déjà vues. Notez qu’il est fait appel à des CDN.

Un exemple

Vous pouvez trouver sur le site de nombreux templates d’exemple. Les éléments nécessaires à la compréhension de ces exemples seront exposés tout au long de ce cours. Voyons toutefois le premier, nommé Starter Template, qui est le plus classique :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

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

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <main role="main" class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </main><!-- /.container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="../../../../assets/js/vendor/popper.min.js"></script>
    <script src="../../../../dist/js/bootstrap.min.js"></script>
  </body>
</html>

Avec cet aspect :

On retrouve ce qu’on a vu précédemment et l’appel au fichier CSS de Bootstrap. On trouve la référence d’un autre fichier CSS : starter-template.css. Voyons ce que contient ce fichier :

body {
  padding-top: 5rem;
}
.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}

Nous verrons, lorsque nous parlerons du composant « Barre de navigation » de Bootstrap, qu’il faut parfois réserver un espace en haut de la page (avec padding-top: 5rem) pour éviter que le texte du début ne se retrouve sous la barre. On trouve aussi ici la classe starter-template qui se contente de fixer un espace interne et un alignement centré du texte. Cette classe ne sert que pour le texte de présentation du template et peut être supprimée ou modifiée selon votre convenance.

On trouve aussi dans la page une barre de navigation (je vous explique tout ça en détail dans ce cours) :

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Le contenu de la page est ensuite inséré dans une balise <main> comportant la classe container :

<main role="main" class="container">

  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>

</main><!-- /.container -->

Nous verrons également l’intérêt de cette classe et son utilisation. Considérez les exemples de templates fournis sur le site de Bootstrap à la fois comme des guides de démarrage et des aides à la compréhension du framework. Évitez de les prendre tels quels sans en comprendre tous les éléments. À l’issue de ce cours vous aurez tout en main pour le faire…

Flexbox

Les flexbox sont devenus de plus en plus populaires depuis quelques années et leur utilisation grandit de plus en plus. Mais de quoi s’agit-il ? Avec le CSS on a un modèle de boîtes (de type block ou inline) qui permet la mise en page. Vous avez sans doute l’habitude du positionnement flottant qui permet de jouer avec la position des blocs. Avec les flexbox les boîtes deviennent flexibles. On a un conteneur et des éléments, et le conteneur a la capacité de modifier les dimensions, positions et ordre des éléments pour qu’ils s’adaptent aux contraintes d’affichage. En fait exactement ce qui manque cruellement avec le modèle de boîtes classique, on peut même dire rigide par rapport à ce modèle flexible.

Dans sa version 3 Bootstrap n’utilisait pas flexbox mais cela change avec la version 4 parce que désormais il n’utilise que ça ! J’ai rédigé un article de présentation ici.

Mais je précise que Bootstrap est équipé de nombreuses classes qui facilitent l’utilisation de flexbox et je vais les citer dans ce chapitre au fur et à mesure de la présentation des superbes possibilités qui nous sont offertes.

Faut-il vraiment connaître flexbox pour utiliser Bootstrap 4 ?

Ce n’est pas indispensable pour une utilisation de base mais ça le devient très vite dès qu’on veut utiliser plus efficacement la librairie.

En résumé

  • Bootstrap s’installe facilement en référençant quelques fichiers sur son serveur ou même en passant directement par des CDN.
  • Bootstrap propose des versions « minifiées » de ses librairies pour en accélérer le chargement.
  • Bootstrap propose un template de démarrage et des exemples pour éviter de partir avec une page blanche.
  • Bootstrap utilise intensivement Flexbox.

Pour vous aider et avoir une vue globale de Bootstrap je vous conseille ce Cheat Sheet vraiment bien fait.

Print Friendly, PDF & Email

4 commentaires

  • Gersoni

    Bonjour suis un webdev, je viens de commencer avec l’apprentissage du framwork laravel 8
    mais ma preocupation se situe au niveau de l’installation de bootstrap via la commande npm install, ça devrait normalement marcher parceque node js je l’ai déjà près installé.
    quand j’essaie de tapper sur ma consol la commande npm install ça me génère des erreurs, que devrai je faire par là Merçi

  • worksfather

    Bonjour. J’espère que vous portez vous bien.
    Merci pour votre cours. J’avais commencé par le suivre sur OpenClassrooms. Il est très complet. J’ai vu le lien vers ce blog sur le forum. J’ai en effet un petite question.

    Je voudrais vraiment utiliser bootstrap pour un projet mais j’hésite à cause de ses classes. Je les trouve un peu trop standard et je voudrais les personnaliser un peu. En faisant quelques recherches, j’ai compris qu’il est possible d’ajouter des préfixes aux classes (du genre au lieu d’utiliser .container, on peut faire en sorte d’utiliser .prefix-container).

    Je voudrais avoir votre avis sur la question. Est-il possible de renommer vraiment les classes ? Quelle est la meilleure manière de le faire.

    Merci de me répondre.

    • bestmomo

      Bonjour,

      Je ne sais pas s’il est si facile de changer le nom des classes, ça me semble un peu laborieux à réaliser en allant mettre les mains dans les fichiers scss et en le régénérant… Toutefois l’organisation du code avec les mixins le permet, par exemple pour la grille il suffit de modifier_grid.scss, mais je ne pense pas que ce soit vraiment judicieux. Quand on utilise bootstrap on accepte sa syntaxe et on s’y habitue…

      Cordialement

Laisser un commentaire