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....
La fin de cet article est réservée aux abonnés. Soutenez le Club Developpez.com en prenant un abonnement pour que nous puissions continuer à vous proposer des publications.
Envoyé par frfancha
