Bootstrap 5 : Migration de la version 4 à la version 5

« Bootstrap no longer depends on jQuery and we’ve dropped support for Internet Explorer. »

Un des plus gros défauts des cadriciels comme Bootstrap c’est le poids. Bootstrap vient sans doute de prendre quelques kilos, mais avec une maudite bonne ablation ; -)

Version 5 alpha 1

Quand j’ai lu cette grande nouvelle en juin dernier (un jour avant ma fête!) c’était comme un cadeau. Le retrait de la dépendance à jQuery, Bravo ! Chanceux celui qui développement toujours, autant que possible, en pur JavaScript (Vanilla)... Car la plupart des sites Web dépendent aujourd’hui de jQuery, des millions de scripts et d’IU souvent carrément signé jQuery...

NOTE : Il sera toujours possible d’utiliser jQuery. En détectant la librairie jQuery dans l’objet window, Bootstrap ajoutera automatiquement toutes ses composantes dans le système de plugins de jQuery !

Sans plus! Cette grande nouvelle proposait peu de nouveauté. J’avais abandonné l’idée d’en faire un tutoriel. Si je n’ai rien écrit, c’est aussi parce que la migration de la version 4 à la version 5 alpha 1 n’a rien de bien compliqué. Personnellement, j’ai surtout eu à adapter mes codes au retrait des sélections perso et à un petit changement avec les groupes de saisie (input group), sans plus.

Sinon, Bootstrap parle d’un gros travail sur la documentation et d’une refonte complète des éléments de formulaires, peu visibles toutefois. Boites à cocher, boutons radio... L’amélioration du système de grille, davantage de points d’arrêt (breakpoints), le navbar-expand-xxl et le container-xxl, col-xxl- à 1320px par exemple (et le retour du xs avec la version 5 alpha 2!), le retrait du flex: 1 0 100% des « row » et surtout l’ajout de colonnes autonomes et l’intéressant line-height : .lh-1, .lh-sm, .lh-base et .lh-lg.

Ha, et un exemple avec Masonry de David DeSandro.

Rien à voir avec la migration cauchemardesque de la version 3 à la version 4. Enfin, le tutoriel attendra la prochaine version...

Version 5 alpha 2

Positionnement absolu - Source getbootstrap.com

Aujourd’hui, 30 septembre 2020, je suis aussi bien heureux de la nouvelle version 5 alpha 2 que j’attendais avec impatience. Avec à peine plus de viande autour de l’os (consultez les notes de version). Un meilleur support pour les thèmes foncés, sous-menu, carrousel foncé dropdown-menu-dark, carousel-dark et surtout le positionnement absolu (top, right, bottom et left) à 0%, 50% ou 100%.

Du débogage, des ajustements du genre sr-only et .sr-only-focusable remplacées par visually-hidden et visually-hidden-focusable. Personnellement je dois surtout ajuster deux éléments en passant à la nouvelle version. Le ratio de mes vidéos embed-responsive embed-responsive-16by9 devient ratio ratio-16x9 et le bouton « fermer », d’une fenêtre modale par exemple, passe de la classe close à btn-close. Une petite nouveauté que je vais utiliser souvent pour les bordures. Mais la version 5 alpha 3 à venir promet aussi la refonte complète des composantes de groupe de saisie (input group) amorcée par la version 5 alpha 1. Avec le retrait de jQuery, c’est la grosse nouvelle de la prochaine version 5.

Feuille de styles et librairie JavaScript

<!-- Feuille de style CSS Bootstrap 5 alpha 2 -->
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css"
  integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK"
  crossorigin="anonymous"
/>

<!-- Javascript Bootstrap 5 alpha 2 Bundle avec Popper.js -->
<script 
  src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"
  integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD"
  crossorigin="anonymous">
</script>

Bootstrap 5 Alpha 3
11 Nov 2020

Alors si la version 5 alpha 3 promet encore un bouleversement au niveau des formulaires, quelques nouveautés comme les outils très attendus pour la grandeur de polices, aussi bien attendre la version 5 alpha 3 si vous n’avez pas encore fait le saut !!

Et effectivement, la version « Bootstrap 5 Alpha 3 » joue davantage sur les composantes. À commencer par le nouvel accordéon qui a sa propre classe au lieu de .card. On a maintenant .accordion-item avec ces classes .accordion-header et .accordion-body ». L’accordéon utilise aussi les pictogrammes « Bootstrap Icons ». Plus de classe .btn-block que j’utilisais beaucoup au profit d’un conteneur .d-grid. Outre les formulaires, c’est ce qui va me demander le plus de temps lors de la migration. L’idée consiste à utiliser un conteneur pour gérer la longueur et la position des boutons. La nouvelle classes .d-grid (eh oui, le display:grid arrive) avec la classe .gap- * pour l’espacement, .d-flex pour le positionnement des boutons dans un conteneur et bien sûr .d-bloc pour l’aspect adaptatif...

Comme promis, enfin, la très attendue class .fs pour la grandeur de police font-size et surtout l’ajout des classes .rounded-1, .rounded-2 et .rounded-3 pour petite, moyenne et grande bordure arrondie. Et finalement les classes .overflow-visible et .overflow-scroll. Bootstrap continue sont travail de normalisation en renommant ses classes .font-weight-* pour .fw-* et .font-style-* pour .fst-*. Du travail en perspective.

Les formulaires

Comme prévu, de gros changement au niveau des formulaires. Bootstrap ajuste des bogues de longue date, notamment la bordure arrondie dans les groupes de saisie en ajoutant une classe de validation .has. La saisie de fichier a vraiment été améliorée, plus besoin de JavaScript et de HTML supplémentaire avec la normalisation avec la classe .form-control. Et ajoute aussi une fonctionnalité très intéressante, déjà disponible dans les exemples de Bootstrap depuis la version 4, et j’ai nommé les « étiquettes flottantes » (Floating labels) :

Derrière Bootstrap

À part quelques améliorations de la documentation et la poursuite de la simplification des scripts JavaScript entamée par la version 5. Bootstrap passe à « Dart Sass » ce qui amène plusieurs changements dans son utilisation vous l’imaginer. Et surtout le nouvel API d’utilitaires (utilities API). Un outil, combiné aux cartes Sass (Sass maps), destiner à créer vos propres classes et familles de classes...

Feuille de styles et librairie JavaScript

Noter que Bootstrap a changé de fournisseur CDN, passant de BootstrapCDN à jsDelivr.

<!-- Feuille de style CSS Bootstrap 5 alpha 3 (149 ko) -->
<link 
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-CuOF+2SnTUfTwSZjCXf01h7uYhfOBuxIhGKPbfEJ3+FqH/s6cIFN9bGr1HmAg4fQ"
  crossorigin="anonymous"
>

<!-- Javascript Bootstrap 5 alpha 3 Bundle avec Popper.js (246 ko) -->
<script 
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-popRpmFF9JQgExhfw5tZT4I9/CI5e2QcuUZPOVXb1m7qUmeR2b50u+YFEYe1wgzy"
  crossorigin="anonymous">
</script>

Donc, du travail en perspective lors de la migration. Pour les boutons (btn-block), les groupes de saisie, les accordéons, la classe .font-weight mais dans l’ensemble de bonnes nouvelles.

Bootstrap v5.0.0-beta1
8 décembre 2020

Bootstrap fait de ça version 5.0.0-beta1 la nouvelle version officielle. Comme prévu, le passage à Popper.js v2 et le support RTL (right to left).

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap v5.0.0-beta1 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin="anonymous">

    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبا بالعالم!</h1>

    <!-- Bootstrap v5.0.0-beta1 Bundle avec Popper.js v2 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

  </body>
</html>

Ce qui explique en partie le changement de nom des classe left et right, au profit de start et end, flex oblige. Un simple « search and replace » selon Bootstrap ;- ). Idem chose pour les marges, et donc :

ml-1 devient ms-1 (margin-start)
mr-1 devient me-1 (margin-end)
Mais aussi float-left devient float-start et float-right devient float-end, et ainsi de suite.

Amateur d’infobulles Bootstrap(!), un autre changement majeur de nom qui affecte plusieurs composantes. L’ajout du « bs » à l’attribut data. Un éclair de génie pour se prémunir des conflits JavaScript !

data-toggle="tooltip" devient data-bs-toggle="tooltip"
data-target devient data-bs-target
data-bs-dismiss devient data-bs-dismiss...

Quelques fixes et nouveautés au niveau du fil d’Ariane dont l’ajout du séparateur perso. Voilà qui résume la version 5.0.0-beta1.

// Modifier le séparateur du fil d'ariane.
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">

Feuille de styles et librairie JavaScript

<!-- Feuille de style CSS Bootstrap 5.0.0-beta1 (153 ko) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"
>

<!-- Javascript Bootstrap 5.0.0-beta1 Bundle avec Popper.js v2 (210 ko) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>

Bootstrap v5.0.0-beta2
22 janvier 2021

Rien de vraiment nouveau, du travaille de fond, un gros remue-ménage sur la documentation, quelques ajustements comme le retrait du formulaire de vertical-align, sans plus. Et l’arrimage avec le nouveau module Popper.js et son positionnement qui affecte plusieurs composantes. Notamment le « tootips » et c’est à peu près le seul ajustement que j’ai dû faire au passage de cette nouvelle version. Le flèche de la plupart de mes « tooltips » n’était plus bien positionné. Normalement, je laisse « tootltip » évaluer la position.

<i data-bs-toggle="tooltip" data-bs-placement="right" title="Retour à l'accueil" class="picto accueil" aria-hidden="true"></i>

Mais visiblement il faut maintenant ajoutant le positionnement à chaque « tooltip ». Par exemple : data-bs-placement="right". J’espère qu’ils corrigeront le tir dans la version définitive.

Feuille de styles et librairie JavaScript

<!-- Feuille de style CSS Bootstrap 5.0.0-beta2 (150 ko) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<!-- Javascript Bootstrap 5.0.0-beta2 Bundle avec Popper.js v2 (79 ko)) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

Bootstrap promet que la prochaine version sera définitive. Yé !

Bootstrap v5.0.0-beta3
25 mars 2021

Exemple de groupe de liste numéroté — Nouveau groupe de liste numéroté

Ç’a été long, mais la voilà enfin, la version Beta définitive. Sans aucun changement majeur qui demande une mise à jour importante de vos codes. J’ai installé cette nouvelle version dans tous mes développements sans nécessiter d’ajustements jusqu’à maintenant. Ce qui est une très bonne nouvelle. Vous travaillez avec la version Beta 2 ou 3 et vous n’aurez aucun problème à passer à la version 5 finale.

Au menu, bon du débogage, amélioration de la documentation, intégration des variables SASS, mais tout de même quelques friandises pour les amateurs de composantes. Et même quelques exemples supplémentaires forts intéressants, comme le groupe liste numéroté list-group-numbered.

Offcanvas

Tout d’abord l’offcanvas basé sur la modale. Il est possible de la positionner à gauche, à droite et en bas et de définir le défilement du body, le tout à l’aide de l’attribut data. Très pratique.

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" data-bs-backdrop="false" data-bs-scroll="true">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
  </div>
  <div class="offcanvas-body">
    Contenu du offcanvas...
  </div>
</div>

Et l’amélioration et la mise à niveau des exemples dont l’ajout de plusieurs exemples qui n’avaient pas beaucoup bougé depuis la version 3 outre le RTL. Du simple exemple de Hérault (hero) ou de la grille de fonctionnalités. Mais aussi des exemples de menu accordéon dans des barres latérales (sidebars) idéales pour intégrer à l’offcanvas et des exemples d’entêtes avec menu. L’équipe promet d’ailleurs d’ajouter plusieurs exemples au fil du temps. Ça serait très intéressant d’ajouter enfin des exemples de menu à multiniveaux... Ce qui manque terriblement avec Bootstrap.

Feuille de styles et librairie JavaScript

<!-- Feuille de style CSS Bootstrap 5.0.0-beta3 (152 ko) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<!-- Javascript Bootstrap 5.0.0-beta3 Bundle avec Popper.js v2 (79 ko)) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

Beaucoup de promesses, ce qui laisse croire à un engouement toujours présent. La prochaine version sera donc la version Bootstrap 5 stable et définitive!

Conclusion

J’utilise déjà depuis le 15 juin 2020 la version 5 alpha 1 et les quelques problèmes rencontrés semble déjà avoir trouvé écho dans l’équipe de Bootstrap puisque la version 5 alpha 2 en corrige plusieurs. Comme la correction de l’infobulle (tooltip) lors du survol d’un élément enfant. J’ai carrément passé à la version 5 alpha 2 ce matin. Mon premier constat, les puristes comme moi y verront un tas davantage, les autres moins, voir pas du tout. On verra à faire une revu plus étoffée de la version 5 lors de la sortie prochaine de la version 5 alpha 3. Enfin, outre le débogage, Bootstrap 5.0.0-beta1 est passablement cosmétique, mais stable. Prêt à l’usage !