IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Bootstrap 5 est officiellement disponible avec un nouveau logo, un nouveau composant offcanvas,
Des mises à jour pour les composants forms et abandonne jQuery

Le , par Bill Fassinou

66PARTAGES

9  1 
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 :

  • suppression de Microsoft Edge Legacy ;
  • suppression d'Internet Explorer 10 et 11 ;
  • suppression de Firefox < 60 ;
  • abandon de Safari < 10 ;
  • abandon de iOS Safari < 10 ;
  • abandon de Chrome < 60 ;
  • abandon d'Android < 6.

Source : Bootstrap 5

Et vous ?

Que pensez-vous des nouveautés et changements dans Bootstrap 5 ?
Quels sont les changements qui vous intéressent le plus dans cette version ?
Quelles sont vos attentes pour les prochaines versions du framework ?

Voir aussi

Bootstrap 4.0 est officiellement disponible : un aperçu des changements notables dans la collection d'outils pour la création de sites Web

La version 5.0 du framework Bootstrap va supprimer jQuery, sa plus grande dépendance côté client pour du pur JavaScript

Bootstrap 4.1 est disponible : des corrections de bogues, de nouvelles classes utilitaires et une mise à jour de la documentation

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de KnifeOnlyI
Membre régulier https://www.developpez.com
Le 07/05/2021 à 8:18
Pour ma part une bonne raison de l'utiliser est que je n'ai pas le temps de me consacrer à faire du CSS (ou SASS, etc.) pour faire un design.
Souvent mes clients ça ne les intéresse pas d'avoir un super design, tant que c'est ergonomique et fonctionnel. Ce que Bootstrap apporte très bien.
En revanche il faut accepter que l'interface produite ne seras pas très vendeuse, c'est clairement pas fait pour du site vitrine sauf si on va beaucoup plus en profondeur. Mais pour des logiciels web de gestion de client, de comptabilité, etc. C'est très bien pour produire rapidement quelque chose de cohérent.
5  0 
Avatar de smarties
Membre éclairé https://www.developpez.com
Le 06/05/2021 à 15:53
C'est une bonne nouvelle l'abandon de jQuery (RIP toi qui nous a rendu service à l'époque ou les technologies web étaient peu unifiées).
Ca va permettre d’alléger les sites et le chargement des pages

Pour les anciens navigateurs, je ne me rends pas comptes de l'ancienneté.
3  1 
Avatar de frfancha
Membre éprouvé https://www.developpez.com
Le 07/05/2021 à 7:42
J'ai un peu du mal à saisir l'intérêt de bootstrap aujourd'hui.
Maintenant que ie et "edge legacy" ont disparu (ce qui est très bien) utiliser du css "standard" ne fait il pas l'affaire plus simplement et à plus long terme ?
Auriez vous des exemples où bootstrap est encore pertinent ?
1  0 
Avatar de grunk
Modérateur https://www.developpez.com
Le 06/05/2021 à 17:01
La liste des breaking changes est quand même pas anodine, notamment sur les formulaire. Ca va pas rendre la migration évidente pour ceux qui souhaite la faire.
0  0 
Avatar de Kulvar
Membre averti https://www.developpez.com
Le 06/05/2021 à 22:45
Citation Envoyé par smarties Voir le message
C'est une bonne nouvelle l'abandon de jQuery (RIP toi qui nous a rendu service à l'époque ou les technologies web étaient peu unifiées).
Ca va permettre d’alléger les sites et le chargement des pages

Pour les anciens navigateurs, je ne me rends pas comptes de l'ancienneté.
En gros le support est pour tous les navigateurs historiques sorti il y a 5 ans et moins (selon le navigateur).
0  0 
Avatar de darklinux
Membre extrêmement actif https://www.developpez.com
Le 07/05/2021 à 2:03
Très bien , ça avance
0  0 
Avatar de emilie77
Membre éclairé https://www.developpez.com
Le 07/05/2021 à 8:37
J'espere que datatables.net et select2 vont passer aussi a des versions sans jquery
0  0 
Avatar de Mrsky
Membre expérimenté https://www.developpez.com
Le 07/05/2021 à 10:15
Citation Envoyé par frfancha Voir le message
J'ai un peu du mal à saisir l'intérêt de bootstrap aujourd'hui.
Maintenant que ie et "edge legacy" ont disparu (ce qui est très bien) utiliser du css "standard" ne fait il pas l'affaire plus simplement et à plus long terme ?
Auriez vous des exemples où bootstrap est encore pertinent ?
En temps que dev back je m'en servais jusqu’à il y a peu pour sortir des interfaces basiques qui soient un minimum correctes visuellement pour les POC.

Les devs front autour de moi m'ont fait passer a Tailwind depuis quelques mois qui est semble t-il bien plus adapté à l'UI/UX d'aujourd'hui (d'après eux) et qui me permet de faire le même genre d'interfaces "jolies sans effort" qu'avant.

Cela dit pour mon utilisation c'est quasiment identique à Bootstrap qui fonctionne toujours parfaitement pour les POC ou les MVP avec skin sympa.
0  0 
Avatar de air-dex
Membre expert https://www.developpez.com
Le 07/05/2021 à 14:41
Citation Envoyé par frfancha Voir le message
J'ai un peu du mal à saisir l'intérêt de bootstrap aujourd'hui.
Maintenant que ie et "edge legacy" ont disparu (ce qui est très bien) utiliser du css "standard" ne fait il pas l'affaire plus simplement et à plus long terme ?
Auriez vous des exemples où bootstrap est encore pertinent ?
Bootstrap ce n'est pas que des classes atomiques où faire du CSS revient à bourrer les attributs class des balises HTML. Perso j'utilise Bootstrap principalement pour sa bibliothèque de composants graphiques. Quant au reste :
  • Pour les layouts je préfère utiliser le CSS standard avec Flexbox et surtout CSS Grid.
  • Je n'ai jamais été fan du CSS atomique à base d'une classe par règle. Une classe c'est fait pour regrouper et donner du sens à un ensemble de règles qu'on trouve vachement souvent ensemble dans les mêmes éléments. Donc plutôt que d'avoir un cryptique "col-4-lg col-8-sm col-0-xl m-auto abbr" partout dans le code, je vais tout regrouper dans une classe "foo__bar--baz" (avec une jolie notation BEM donc) qui annoncera clairement de quoi il s'agit et qui facilitera la compréhension du code (et donc la maintenance) pour celui qui passera dessus après moi.
0  0 
Avatar de smarties
Membre éclairé https://www.developpez.com
Le 10/05/2021 à 9:03
Je suis comme beaucoup ici, j'utilise Bootstrap pour réaliser des interfaces fonctionnelles et une cohérence visuelle. Même sur des projets personnels je l'utilise.
Certains diront que toutes les interfaces se ressemblent mais au moins ils ne sont pas perdus !

Il faudra que je regarde Tailwind aussi je ne connaissais pas
0  0