Bootstrap 5 est officiellement disponible avec un nouveau logo, un nouveau composant offcanvas,

Des mises à jour pour les composants forms et abandonne jQuery

Le 6 mai 2021 à 15:18, par Bill Fassinou

130PARTAGES

Après plus de trois ans de développement, Bootstrap 5 est officiellement disponible. L'équipe de Bootstrap a annoncé mercredi la disponibilité générale de la nouvelle version du framework HTML, CSS et JavaScript le plus populaire du marché, qui introduit de nouvelles fonctionnalités, des améliorations et quelques changements de ruptures. Bootstrap 5 rompt effectivement les liens avec la bibliothèque jQuery pour du pur JavaScript, comme il a été annoncé en 2019. Les autres nouveautés de cette version incluent un nouveau logo, un nouveau composant offcanvas, etc.

« Bootstrap 5 est officiellement arrivé ! Après trois alphas, trois bêtas et plusieurs mois de travail acharné, nous livrons la première version stable de notre nouvelle version majeure. Ce fut une aventure folle rendue possible par nos mainteneurs et l'incroyable communauté qui utilise et contribue à Bootstrap » a déclaré l'équipe dans un billet de blogue annonçant la nouvelle version du framework. Voici quelques points forts de Bootstrap 5.

Un nouveau logo

Selon l'équipe de Bootstrap, l'un des plus grands changements de la v5 a été la refonte du logo et la mise à jour du design de la documentation. « Inspiré par le travail que nous avons effectué sur les icônes Bootstrap, notre nouveau logo rappelle les accolades de CSS et notre icône B de longue date. Il s'agit d'une petite mise à jour, mais néanmoins amusante, et qui, selon nous, donne le ton de cette nouvelle version majeure. Toujours le même Bootstrap, mais légèrement amélioré », a expliqué l'équipe dans son billet de blogue. Les nouveaux documents sont plus clairs, mieux organisés avec de nouvelles sections de contenu, et la navigation est également améliorée.

JavaScript

La plus grande modification en rapport avec JavaScript a été la suppression de jQuery, mais l'équipe a déclaré avoir également apporté un certain nombre d'améliorations au-delà de cela :

plus de jQuery ;
tous les plugins peuvent désormais accepter un sélecteur CSS comme premier argument ;
mise à jour vers Popper 2 ;
les attributs de données pour tous les plugins JavaScript sont maintenant espacés par des noms avec bs. Par exemple, vous pouvez utiliser data-bs-toggle au lieu de data-toggle ;
le positionnement de dropdown, popover et tooltip a été revu avec l'arrivée de Popper v2 ;
le positionnement des toasts a également été revu et s'appuie désormais sur les nouveaux utilitaires de positionnement ;
ajout de la possibilité d'utiliser des classes personnalisées pour les infobulles et les popovers ;
diverses optimisations ont été effectuées pour mieux partager le code entre les composants ;
modification des dropdowns pour émettre des événements sur .dropdown-toggle au lieu de .dropdown ;
suppression du trait de soulignement des méthodes statiques publiques comme _getInstance() en getInstance() ;
renommage de whiteList en allowList dans les popovers et les tooltips.

Nouveau composant offcanvas

L'un des principaux ajouts de composants dans Bootstrap 5 est le tout nouveau composant offcanvas. Basé sur les éléments fondamentaux des modals et les partageant, le nouveau composant offcanvas est doté d'une toile de fond, d'un défilement du corps et d'un placement configurables. Les composants offcanvas peuvent être placés en haut, à droite, en bas ou à gauche de la fenêtre d'affichage. Configurez ces options à l'aide d'attributs de données ou via les API JavaScript.

Nouveau composant accordion

L'équipe a remplacé le composant accordéon .card par un tout nouveau composant .accordion, en résolvant plusieurs bogues au passage. Ce nouveau composant utilise toujours le plug-in JavaScript Collapse, mais avec un HTML et un CSS personnalisés pour le prendre en charge. Selon l'équipe, il est meilleur et plus facile que jamais à utiliser. Il comprend des icônes Bootstrap en forme de chevrons indiquant l'état et la possibilité de cliquer.

L'équipe a inclus la prise en charge d'un composant accordéon affleurant (ajoutez .accordion-flush) pour supprimer les bordures extérieures, ce qui permet de le placer plus facilement dans les éléments parents.

Nouveaux composants forms et mise à jour

L'équipe a annoncé avoir remanié la documentation et les composants des formulaires. Elle dit avoir regroupé tous les styles de formulaires dans une nouvelle section consacrée aux formulaires, y compris le composant de groupe de saisie pour leur donner l'importance qu'ils méritent. En plus des nouvelles pages de documentation, l'équipe a redessiné tous les contrôles de formulaires.

Dans la v4, elle a introduit une suite étendue de contrôles de formulaires personnalisés, notamment contrôles, radios, interrupteurs, fichiers, etc., mais ceux-ci s'ajoutaient aux valeurs par défaut fournies par chaque navigateur. Avec la v5, l'équipe a opté pour une personnalisation totale.

Case à cocher et bouton radio

Selon l'équipe, si vous êtes familier avec le balisage des formulaires de la v4, cela ne devrait pas vous paraître trop éloigné. Grâce à un ensemble unique de contrôles de formulaires et à l'accent mis sur le remaniement des éléments existants plutôt que sur la création de nouveaux éléments via des pseudo-éléments, l'aspect et la convivialité sont beaucoup plus cohérents.

Chaque case à cocher (chaque case d'option, chaque sélection, chaque fichier, chaque plage, etc.) comprend une apparence personnalisée afin d'unifier le style et le comportement des contrôles de formulaires, quels que soient le système d'exploitation et le navigateur. Ces nouveaux contrôles de formulaires sont tous basés sur des contrôles de formulaires standard entièrement sémantiques : plus de balisage superflu, juste des contrôles de formulaires et des étiquettes.

Étiquettes flottantes

Les étiquettes flottantes prennent en charge les entrées textuelles, les sélections et les zones de texte. L'équipe a expliqué qu'il existe une limitation avec les zones de texte où plusieurs lignes de texte peuvent être obscurcies par l'étiquette flottante. Elle travaillerait toutefois sur des solutions à ce problème.

Nouveau champ pour le choix des fichiers

Dans Bootstrap 5, l'équipe a abandonné la classe personnalisée .form-file pour des styles supplémentaires sur la classe .form-control. Cela signifie qu'elle n'a plus besoin de JavaScript supplémentaire pour rendre les styles des champs de type file fonctionnels, le nouveau formulaire pour le choix des fichiers entièrement CSS.

Prise en charge de RTL

Cette nouvelle mouture est également marquée par l'ajout du support de RTL (Left-To-Right) à Bootstrap. À un haut niveau, l'approche RTL de l'équipe comprend une poignée de changements :

de nouvelles versions RTL du fichier CSS dist, qui comprend la grille, Reboot, les utilitaires et les paquets standard ;
nouvelle documentation RTL pour vous aider à démarrer ;
cinq nouveaux exemples RTL qui montrent l'approche CSS RTL de l'équipe en action, convertissant les exemples d'album, de caisse, de carrousel, de blogue et de tableau de bord en de tout nouveaux équivalents RTL ;
deux nouvelles pages d'aide-mémoire : l'aide-mémoire par défaut pour le CSS standard et l'aide-mémoire RTL.

Nouvelle API d'utilitaires

L'équipe a implémenté une toute nouvelle API d'utilitaires dans Bootstrap 5 comme principal moyen d'étendre les classes d'utilitaires par défaut de Bootstrap. Générez et personnalisez facilement les utilitaires avec la prise en charge des noms de classe personnalisés, la prise en charge de la génération de classes basées sur l'état comme :hover, les versions imprimées, etc. L'équipe a déclaré que depuis que les utilitaires sont devenus un mode de construction privilégié, elle s'est efforcée de trouver le bon équilibre pour les mettre en œuvre dans Bootstrap tout en assurant le contrôle et la personnalisation.

Dans la v4, elle y est parvenue avec les classes globales $enable-*, et elle a poursuivi ses efforts dans la v5. Mais avec une approche basée sur l'API, elle a créé un langage et une syntaxe dans Sass pour vous permettre de créer vos propres utilitaires à la volée tout en étant capable de modifier ou de supprimer ceux qu'elle fournit.

Nouveaux utilitaires

En parlant d'utilitaires, l'équipe en a ajouté de nouvelles à son arsenal, notamment :

ajout d'utilitaires de positionnement : haut, droite, bas et gauche avec des valeurs de 0, 50 % et 100 % ;
ajout de l'option .d-grid, ainsi que de nouveaux utilitaires d'espacement pour faciliter la mise en page des grilles ;
ajout des utilitaires .fs pour la taille de la police ;
renommage des utilitaires font-weight en .fw ;
ajout de .rounded-1, .rounded-2 et .rounded-3 pour les nouveaux utilitaires de rayon de bordure small, medium et large ;
ajout des utilitaires .overflow-visible et .overflow-scroll.

Dart Sass

L'équipe a annoncé être passée à Dart Sass, LibSass étant déprécié. « Nous avons testé nos constructions avec Dart Sass pendant un certain temps et nous avons décidé d'abandonner LibSass, qui est déprécié depuis quelques semaines. Nous conservons les modules Sass pour le moment. Nous n'utilisons toujours pas le nouveau système de modules pour des raisons de compatibilité et pour faciliter la mise à jour de la v4 », a-t-elle déclaré.

Support des navigateurs

L'équipe Bootstrap a abandonné plusieurs anciens navigateurs et certaines plateformes dans cette mise à jour, ce qui en fait l'un des plus grands changements depuis un certain temps :