Tuto Bootstrap : qu’est-ce qui a changé après le Bootstrap 5

On sait que dans le monde du développement web la polémique est toujours chaude, Bootstrap oui ou Bootstrap non ? Les plus grandes critiques viennent sûrement de l’utilisation très intensive que certains thèmes font des principaux composants de ce framework tels que les polices, les boutons, les formulaires, les tableaux, les cartes, les barres de navigation et les couleurs sans les personnaliser, faisant ainsi le risque de développer des sites qui sont toujours les mêmes est très élevé, mais si on se limite à l’utiliser pour la gestion du réseau la question change.

En fait, dans nos cours de conception Web, nous voulons transmettre ce concept, Bootstrap (ou un autre framework alternatif) est une excellente ressource pour développer plus rapidement des sites Web réactifs et adaptatifs, sans avoir à travailler avec mille ajustements dans les requêtes multimédias. Son système à 12 colonnes en fait en effet une excellente solution pour adapter vos structures au monde responsive.

En mai 2021, Bootstrap 5 est sorti, la nouvelle version du framework extrêmement populaire né sur Twitter il y a maintenant 10 ans. En août, la version 5.1 a corrigé plusieurs bugs et problèmes du premier realese et nous sommes donc prêts à nous plonger dans les nouvelles fonctionnalités introduites. Ici la documentation officielle

Qu’est-ce qui a changé par rapport au très populaire 4 ?

modifications de la grille
Certaines des plus grandes nouvelles pour ceux qui utilisent le framework depuis un certain temps et uniquement pour le système de grille sont :

L’introduction d’un nouveau point d’arrêt qui fait passer le conteneur Bootstrap de base de 1140px à 1320px puis l’ajout d’un nouveau préfixe xxl en plus de ceux déjà présents. Ce nouveau point d’arrêt sera utile pour les tailles d’écran supérieures à 1400 pixels.
Les gouttières (l’espace entre une colonne et une autre) ont changé d’unité de mesure, passant de px à rem, et sont désormais plus resserrées, passant de 30px à 24px.
Des classes ont été ajoutées pour définir la largeur de la gouttière à la fois horizontale et verticale : .g – * (0… 5) en fonction du multiplicateur que nous voulons attribuer.
Suppression de la position : propriété relative qui était automatiquement appliquée aux classes .

JavaScript vanille au lieu de jQuery

Etant donné la tendance à utiliser Bootstrap avec des frameworks JavaScript tels que React, Vue et Angular la dépendance forcée de jQuery était pour la plupart mal tolérée, l’équipe de développement a donc abandonné la dépendance aux librairies jQuery pour passer à un support Vanilla JavaScript. Cela ne veut pas dire que dans vos projets qui utilisent déjà jQuery vous ne pourrez plus l’utiliser, mais qu’il n’est tout simplement plus utilisé par Bootstrap pour les composants “animés” qui en avaient besoin auparavant.

RFS – taille de police réactive

Le système sera actif par défaut avant en phase bêta pour la gestion entièrement réactive des propriétés de taille de police, le mécanisme calculera automatiquement la valeur appropriée pour les caractères en fonction de la taille de la fenêtre du navigateur.

En plus de la gestion de la taille de la police, ce système fournit également un redimensionnement automatique pour des propriétés telles que la marge et le remplissage.

Nouvelle bibliothèque d’icônes

Bootstrap disposait déjà d’une bibliothèque native d’icônes jusqu’à la version 3, puis abandonnée avec la version 4. Désormais avec la version 5 un système d’icônes en SVG de plus de 1000 icônes a été réintroduit pour être utilisé dans des projets comme SVG, comme icon-font , comme une balise img ou dans le css comme pseudo-éléments.

Prise en charge abandonnée pour Internet Explorer 10 et 11

Compte tenu de la migration presque complète d’Explorer vers Microsoft’s Edge et du fait que le navigateur le plus moderne utilise la technologie chrome qui lui permet de restituer correctement les animations js et css les plus modernes comme les concurrents Chrome et Firefox, l’équipe Bootstrap s’est également adaptée en éliminant le support pour Internet Explorer.

Nouveau support pour la grille CSS

A partir de cette version Bootstrap, qui a toujours fonctionné en exploitant les propriétés de flexbox, a introduit la possibilité de passer de l’affichage classique : flex à l’affichage : grille. Nous sommes encore dans une version expérimentale, mais dans la documentation officielle, ils parlent d’un futur hybride. On verra.

Prise en charge de droite à gauche (RTL)

À partir de cette version, il sera également possible d’utiliser Bootstrap pour des projets qui prévoient l’écriture des pages de droite à gauche (RTL – Right To Left) pour le développement de sites Web dont la langue le prévoit comme l’arabe, l’hébreu ou le persan.

Changements de composants

Certains composants ont également changé, voyons les nouveautés :

Nouveau composant d’accordéon
Contrôles de formulaire améliorés pour les entrées de formulaire et les zones de texte
Ajout d’étiquettes flottantes dans les entrées de formulaire
Jeter la classe de carte qui était utilisée pour rendre les colonnes hautes égales
Renommez différents utilitaires comme float-left -> float-start, float-right -> float-end, border-left -> border-start, border-right -> border-end …
Ajout de composants d’espace réservé pour simuler le chargement de la page.

En conclusion : Pourquoi continuer à développer avec Bootstrap 4 ?

Si vous avez besoin d’assistance pour IE10 et IE11 pour votre projet
Si votre site web dépend de jQuery et que vous n’êtes pas familier avec JavaScript pour les éléments qui le nécessitent
Si vous utilisez déjà Bootstrap 4 et que vous ne vous souciez pas (ou ne voulez pas vous adapter) des nouvelles modifications introduites par Bootstrap 5.
Et pourquoi choisir de migrer vers Bootstrap 5 pour vos nouveaux jobs ou migrer ceux existants à la place ?

Si vous utilisez déjà React ou Vue.js et que vous ne voulez plus dépendre de jQuery
Si vous êtes intéressé par les extensions de la nouvelle version telles que les nouveautés du système de grille, les nouveaux utilitaires, l’écriture RTL, etc..
Quant à moi, je m’adapte toujours au changement, certes les innovations introduites sont nombreuses et valables, mais pour ceux comme moi qui utilisent et enseignent le framework uniquement pour le système de grille et non pour ses composants, changer d’approche ne sera pas si compliqué .

Et toi? L’utilisez-vous déjà ? Et comment vas-tu?