Migration de Bootstrap 4 à Bootstrap 5

En décembre 2020, Bootstrap 5 Beta 1 a été publié. Après avoir lu tous les changements et ajouts, on ne peut que conclure qu'il s'agit d'un nouveau grand pas en avant.

17 janvier 2021

Peter

Dans Bootstrap 5

Pas encore de commentaires

https://unsplash.com/@davidboca

De nos jours, les sites web utilisent beaucoup de CSS et de Javascript. Lorsque vous construisez des sites web, vous ne pouvez pas les tester tout le temps avec les principaux navigateurs. Il vous faut plutôt un framework qui supporte tous les principaux navigateurs. Ce framework doit être bien pris en charge, ce qui signifie qu'il n'en reste que quelques-uns.

Pour ce site, j'ai choisi Bootstrap 4. Ce n'est pas une coïncidence. Il y a quelques années, je cherchais le meilleur framework pour un grand nombre de sites web pour un client. Après une vaste sélection, Bootstrap est sorti en tête.

J'aime beaucoup Bootstrap. Je ne suis pas un expert, mais un développeur qui l'utilise pour le frontend. Cela signifie que je considère Bootstrap principalement d'un point de vue technique. Je ne suis pas non plus un graphiste, mais je connais des graphistes qui l'aiment aussi.

Pourquoi passer à Bootstrap 5 ?

En décembre 2020, Bootstrap 5 Beta 1 a été publié. Après avoir lu tous les changements et ajouts, on ne peut que conclure qu'il s'agit d'un nouveau grand pas en avant. Bootstrap 5 Beta a remplacé Bootstrap 4 sur la page d'accueil du site Internet Bootstrap , ce qui signifie qu'ils le considèrent au moins comme adapté aux nouveaux designs.

Pourquoi ai-je voulu mettre à jour la Bootstrap 4 en Bootstrap 5 ? Le week-end dernier, j'ai mis à niveau mon PC de développement et mon ordinateur portable de Ubuntu 18.04 à Ubuntu 20.04. J'ai donc pensé, pendant que je suis encore en mode de mise à niveau, pourquoi ne pas mettre à niveau le Bootstrap aussi, je veux probablement le faire cette année de toute façon.

RTL, langues de droite à gauche

Beaucoup n'en auront pas besoin, mais c'est une excellente chose si vous voulez prendre en charge les langues de droite à gauche. Il y a environ 300 millions de locuteurs natifs de ces langues. Pour l'activer, il vous suffit d'ajouter dir="rtl" à l'élément <html>. Vous pouvez essayer vous-même.

To enable  RTL  add '?rtl=on' to the url

To disable  RTL  add '?rtl=off' to the url

Avez-vous besoin d'une mise à jour ?

Comme beaucoup de gens, j'utilise Bootstrap tel quel, donc à partir d'un CDN, je l'héberge uniquement sur mon propre serveur web. Si vous utilisez beaucoup de personnalisation, SCSS, cela peut devenir difficile. Dans cet article, je partage mes notes sur la mise à jour de ce site web.

Quelques questions et réponses :

La migration a-t-elle été réussie ?
Oui. Ce site web fonctionne maintenant avec Bootstrap 5.
La mise à jour a-t-elle été difficile ?
Non.
Combien de temps cela a-t-il pris ?
Cinq jours. La plupart du temps a été consacré à la conversion des champs de formulaire. J'ai également dû modifier les fonctions de génération des formulaires.
Y a-t-il eu des problèmes ?
Oui, il y a eu quelques problèmes. Au moins un problème n'est pas encore résolu à l'heure actuelle. Dans Bootstrap 4, l'icone de hamburger se transforme en "X" et vice versa. Je n'ai aucune idée de la façon de procéder dans Bootstrap 5.
Devriez-vous faire une mise à jour ?
C'est à vous de décider. Je vous suggère d'abord de regarder les parties difficiles comme le menu déroulant. Lisez le reste de ce billet et regardez les problèmes sur Github.
Qu'est-ce qui vous a pris le plus de temps ?
Réorganisation des champs de formulaire.

Bootstrap 5 a abandonné jQuery, mais je ne peux pas m'en passer....

Bootstrap 5 n'utilise plus jQuery. Je peux l'imaginer. Ils n'en avaient besoin que partiellement et peuvent maintenant régler eux-mêmes les problèmes, les incompatibilités. Une dépendance en moins.

J'utilise jQuery partout et je ne vais certainement pas remplacer tout mon code par le Javascript normal. La raison principale est que je n'ai pas le temps de résoudre les problèmes de navigateur, les problèmes de sécurité. Cela signifie-t-il que vous devez charger plus de Javascript ? Pas vraiment. Bootstrap a également pris le code nécessaire sur popper.js et l'a regroupé avec son propre code.

Outil de conversion des classes Bootstrap

Je n'ai pas trouvé d'outil pour convertir les classes Bootstrap , j'ai donc utilisé Rexxer, un outil général de recherche et de remplacement pour Linux. Cela fonctionnait bien, mais était parfois très lent à cause de tous les fichiers qu'il fallait rechercher. Mais je ne me plains pas. J'aurais également pu écrire un outil dans Python, mais cela aurait pris quatre heures de plus. Vous voudrez peut-être attendre que d'autres outils de mise à jour soient disponibles.

Étape 1 : Vérifiez les documents de migration Bootstrap

Sur le site web Bootstrap , il y a une page intitulée "Migration vers la version 5". Bien que tout ne soit pas listé ici, je me suis souvent retrouvé à revenir sur cette page pour voir les changements apportés à certaines classes, par exemple. Le site web Bootstrap dispose maintenant (enfin) d'une fantastique boîte de recherche avec autocomplétion.

Étape 2 : Modifier le modèle de base

Déplacer votre modèle de base vers Bootstrap 5 n'a rien de spécial. La partie la plus intéressante est la suppression de popper.js. Le code se trouve maintenant dans bootstrap.bundle.min.js. Après avoir effectué cette étape, vous vous demandez peut-être : qu'est-il arrivé à mon beau site web ? Ne désespérez pas !

Modèle de base Bootstrap 4 :

<!DOCTYPE html>
<html lang="en">
<head>
<meta  charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/static/vendor/bootstrap/4.5.0-dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" rel="stylesheet">
</head>
<body>
	
<header>
</header>

<main>
</main>

<footer>
</footer>

<script src="/static/vendor/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script src="/static/vendor/popper/1.16.0/umd/popper.min.js"></script>
<script src="/static/vendor/bootstrap/4.5.0-dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

</body>
</html>

Bootstrap 5 modèle de base :

<!DOCTYPE html>
<html lang="en">
<head>
<meta  charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/static/vendor/bootstrap/5.0.0-beta1-dist/css/bootstrap.min.css" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" rel="stylesheet">

<body>

<header>
</header>

<main>
</main>

<footer>
</footer>

<script src="/static/vendor/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script src="/static/vendor/bootstrap/5.0.0-beta1-dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>
</html>

Étape 2 : Renommer les classes Bootstrap

La prochaine chose à faire est de renommer les classes Bootstrap . Après avoir changé le modèle de base, vous verrez un site avec de nombreux problèmes. Si vous avez consulté la page "Migration vers la v5" du site web Bootstrap , vous remarquerez que de nombreuses classes Bootstrap ont été renommées. Il n'y a pas une seule belle liste sur cette page, alors j'ai supprimé les changements qui étaient importants pour moi :

Components
---
Rename .dropleft and .dropright to .dropstart and dropend.
Rename .dropdown-menu-*-left and .dropdown-menu-*-right to .dropdown-menu-*-start and .dropdown-menu-*-end.
Rename .bs-popover-left and .bs-popover-right to .bs-popover-start and .bs-popover-end.
Rename .bs-tooltip-left and .bs-tooltip-right to .bs-tooltip-start and .bs-tooltip-end.
Rename .carousel-item-left and .carousel-item-right to .carousel-item-start and .carousel-item-end.
Rename .close to .btn-close for a less generic name.

Utilities
---
Rename .left-* and .right-* to .start-* and .end-*.
Rename .float-left and .float-right to .float-start and .float-end.
Rename .border-left and .border-right to .border-start and .border-end.
Rename .rounded-left and .rounded-right to .rounded-start and .rounded-end.
Rename .ml-* and .mr-* to .ms-* and .me-*.
Rename .pl-* and .pr-* to .ps-* and .pe-*.
Rename .text-left and .text-right to .text-start and .text-end.

Text utilities
---
Rename .font-weight-* utilities as .fw-* for brevity and consistency.
Rename .font-style-* utilities as .fst-* for brevity and consistency.

Data utilities
---
Rename data-toggle to data-bs-toggle
Rename data-target to data-bs-target
Rename data-parent to data-bs-parent
Rename data-dismiss to data-bs-dismiss
Rename data-offset to data-bs-offset
Rename data-interval to data-bs-interval
Rename data-ride to data-bs-ride

Helpers
---
Rename .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable

Étape 3 : Correction d'un problème

La prochaine étape consiste à réparer tout ce qui est cassé. Je maintiens deux fichiers CSS supplémentaires :

default.css
Peut être modifié pour un autre thème.
custom.css
Contient le CSS qui doit toujours être présent.

Vous trouverez ci-dessous mes notes. Tout ce que j'ai fait n'est pas répertorié ici. J'ai omis certaines conversions de champs de formulaire.

Tous les liens sont maintenant soulignés par défaut. Horrible !

Correction : Ajout à default.css :

a, ... {
	color: #000000;
	text-decoration: none;
}

Titres trop gras

Je ne sais pas si c'était vraiment un changement.
Correction : Ajout à default.css :

h1, h2, h3, h4, h5, h6 {
	font-weight: 400!important;
}

Problèmes de basculement du Navbar (hamburger) (non résolus)

Cela fonctionne différemment maintenant. Dans Bootstrap 4 , je passe du hamburger à X et inversement. Cela ne fonctionne plus dans Bootstrap 5 et je n'ai pas de solution pour le moment. J'ai dû supprimer le "X".

L'ordre des colonnes, la colonne de gauche et la colonne de droite ont été échangées sur le mobile

Correction : J'ai dû jouer un peu avec les classes d'ordre pour corriger cela.

Les balises ont visuellement disparu

Les tags utilisaient la classe de badge. Il y a eu quelques changements avec la classe de badge.
Correction : J'ai remplacé la classe de badge par la classe de bouton. C'est mieux de toute façon.

Bouton de fermeture pour les alertes et les modales

Réparer : Suppression de la ligne de symbole "&times".

Alertes. Dans Bootstrap 4 , vous avez quelque chose comme :

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Dans Bootstrap 5 , cela devient :

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Même correction pour les modaux.

Effondrement de la marque navbar et déplacement du hamburger vers les limites gauche et droite de la page

Avec Bootstrap 4 , j'ai dû modifier ce point.

Corriger : Supprimez px-0 dans la classe de conteneur.

De :

<div class="sticky-top z-index-30">
  <nav class="navbar   navbar-expand-md {{  navbar_main_extra_class }} sticky-top z-index-30">
    <div class="container  px-0  mx-auto max-width-site">

To :

<div class="sticky-top z-index-30">
  <nav class="navbar   navbar-expand-md {{  navbar_main_extra_class }} sticky-top z-index-30">
    <div class="container mx-auto max-width-site">

Augmentation de la marge à gauche et à droite sur XS et SM

Réparer : Réduire la marge en ajoutant px-0 et px-md-2.

De :

<main role="main" class="container-fluid  px-0  px-sm-3 pb-3 pt-5">
  <div class="row no-gutters mx-auto max-width-site">
    <div class="col">

À :

<main role="main" class="container-fluid  px-0  px-sm-3 pb-3 pt-5">
  <div class="row no-gutters mx-auto max-width-site">
    <div class="col  px-0  px-md-2">

Formulaire - pas de marge en dessous des champs du formulaire

La classe de groupe de forme a été supprimée.

Correction : ajout à custom.css :

.form-group {
	margin-bottom: 1rem;
}

Formulaires - Groupe d'entrée

La barre de recherche dans navbar est devenue laide. Ceci est un groupe d'entrée. Bootstrap 5 a supprimé .input-group-append et .input-group-prepend.

Correction : Utilisez la documentation de Bootstrap pour le groupe d'entrée.

Dans Bootstrap 4 , vous avez :

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's  username" aria-label="Recipient's  username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

Dans Bootstrap 5 , cela devient

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's  username" aria-label="Recipient's  username" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

Formulaires - Les étiquettes des champs de formulaire nécessitent maintenant la classe .form-label

Correction : Ajout d'une classe de formulaire.

Dans Bootstrap 4 vous avez :

  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  </div>

Dans Bootstrap 5 , cela devient

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

Formulaires - La sélection personnalisée a été supprimée

Correction : changer de classe.

Dans Bootstrap 4 vous avez :

<select class="custom-select">
...

Dans Bootstrap 5 , cela devient

<select class="form-select" aria-label="Default select example">

Formulaires - La case à cocher "Personnalisé" a été supprimée

Elle est maintenant identique à la case à cocher Bootstrap 4 .

Dans Bootstrap 4 , vous avez :

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">
    Check this custom checkbox
  </label>
</div>

Dans Bootstrap 5 , cela devient

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

Il y a des choses que j'aime et d'autres que je souhaite encore

Comme :

Plus de contrôle sur la mise en page
Quelques incohérences supprimées
Nouvelle police par défaut
Polices de caractères réactives
Des frontières qui ont de la largeur
Contrôle des gouttières
Il est maintenant possible de changer l'espace des gouttières très facilement. J'ai appliqué la classe gx-3 immédiatement !

Souhait :

Plus de classes de largeur, telles que w-10, w-40
Classes de largeur réactives, comme w-md-25
Frontières réactives, par exemple les limites des fossés sur les téléphones mobiles

Résumé

La migration de Bootstrap 4 à Bootstrap 5 a pris beaucoup de temps. Elle est réalisée pour environ 90%. Et je n'utilise qu'un ensemble limité. La plupart du temps a été consacré à la conversion des champs du formulaire. Je génère des formulaires avec des champs avec un script Jinja et j'ai dû faire beaucoup de changements. Mais une bonne chose est que Bootstrap 5 a supprimé les champs personnalisés.
Si vous avez un site web qui fonctionne encore pendant quelques années, la migration vers Bootstrap 5 en vaut vraiment la peine. Vous pouvez également attendre quelques mois, d'ici là, la plupart de vos problèmes auront probablement été résolus par d'autres.

Liens / crédits

Bootstrap 5 Beta 1
https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/

Build fast, responsive sites with Bootstrap
https://getbootstrap.com/

Migrating to v5
https://getbootstrap.com/docs/5.0/migration/

Reboot
https://getbootstrap.com/docs/5.0/content/reboot/

twbs / bootstrap
https://github.com/twbs/bootstrap

En savoir plus...

Bootstrap

Laissez un commentaire

Commentez anonymement ou connectez-vous pour commenter.

Commentaires

Laissez une réponse

Répondez de manière anonyme ou connectez-vous pour répondre.

Migration de Bootstrap 4 à Bootstrap 5

Pourquoi passer à Bootstrap 5 ?

RTL, langues de droite à gauche

Avez-vous besoin d'une mise à jour ?

Bootstrap 5 a abandonné jQuery, mais je ne peux pas m'en passer....

Outil de conversion des classes Bootstrap

Étape 1 : Vérifiez les documents de migration Bootstrap

Étape 2 : Modifier le modèle de base

Étape 2 : Renommer les classes Bootstrap

Étape 3 : Correction d'un problème

Tous les liens sont maintenant soulignés par défaut. Horrible !

Titres trop gras

Problèmes de basculement du Navbar (hamburger) (non résolus)

L'ordre des colonnes, la colonne de gauche et la colonne de droite ont été échangées sur le mobile

Les balises ont visuellement disparu

Bouton de fermeture pour les alertes et les modales

Effondrement de la marque navbar et déplacement du hamburger vers les limites gauche et droite de la page

Augmentation de la marge à gauche et à droite sur XS et SM

Formulaire - pas de marge en dessous des champs du formulaire

Formulaires - Groupe d'entrée

Formulaires - Les étiquettes des champs de formulaire nécessitent maintenant la classe .form-label

Formulaires - La sélection personnalisée a été supprimée

Formulaires - La case à cocher "Personnalisé" a été supprimée

Il y a des choses que j'aime et d'autres que je souhaite encore

Résumé

Liens / crédits

En savoir plus...

Bootstrap

Laissez un commentaire

Commentaires

Laissez une réponse

Récent

Les plus consultés

Étiquettes