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

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Chroniqueur Actualités

    Homme Profil pro
    Rédacteur technique
    Inscrit en
    juin 2016
    Messages
    1 854
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Bénin

    Informations professionnelles :
    Activité : Rédacteur technique
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : juin 2016
    Messages : 1 854
    Points : 40 637
    Points
    40 637
    Par défaut Bootstrap 5 est officiellement disponible avec un nouveau logo, un nouveau composant offcanvas
    Bootstrap 5 est officiellement disponible avec un nouveau logo, un nouveau composant offcanvas
    des mises à jour pour les composants forms et abandonne jQuery

    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.

    Nom : v5-new-logo.png
Affichages : 134352
Taille : 150,9 Ko

    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
    Contribuez au club : corrections, suggestions, critiques, ... Contactez le service news et Rédigez des actualités

  2. #2
    Membre éclairé
    Homme Profil pro
    Développeur
    Inscrit en
    août 2003
    Messages
    497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : août 2003
    Messages : 497
    Points : 899
    Points
    899
    Par défaut
    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. #3
    Modérateur
    Avatar de grunk
    Homme Profil pro
    Architecte Web / Android
    Inscrit en
    août 2003
    Messages
    6 300
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Architecte Web / Android
    Secteur : Industrie

    Informations forums :
    Inscription : août 2003
    Messages : 6 300
    Points : 18 128
    Points
    18 128
    Par défaut
    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.
    Pry Framework php5 | N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  4. #4
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2016
    Messages
    113
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2016
    Messages : 113
    Points : 383
    Points
    383
    Par défaut
    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).

  5. #5
    Membre extrêmement actif
    Profil pro
    Consultant en technologies
    Inscrit en
    novembre 2005
    Messages
    520
    Détails du profil
    Informations personnelles :
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant en technologies
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : novembre 2005
    Messages : 520
    Points : 838
    Points
    838
    Par défaut
    Très bien , ça avance

  6. #6
    Membre éprouvé
    Profil pro
    Inscrit en
    novembre 2009
    Messages
    474
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : novembre 2009
    Messages : 474
    Points : 1 097
    Points
    1 097
    Par défaut Aujourd'hui
    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 ?

  7. #7
    Membre régulier
    Homme Profil pro
    Développeur informatique
    Inscrit en
    novembre 2017
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Charente (Poitou Charente)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : novembre 2017
    Messages : 25
    Points : 77
    Points
    77
    Par défaut
    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.

  8. #8
    Membre éclairé
    Femme Profil pro
    Inscrit en
    juillet 2012
    Messages
    216
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Italie

    Informations forums :
    Inscription : juillet 2012
    Messages : 216
    Points : 754
    Points
    754
    Par défaut
    J'espere que datatables.net et select2 vont passer aussi a des versions sans jquery

  9. #9
    Membre expérimenté
    Homme Profil pro
    Noob
    Inscrit en
    octobre 2009
    Messages
    439
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Noob

    Informations forums :
    Inscription : octobre 2009
    Messages : 439
    Points : 1 612
    Points
    1 612
    Par défaut
    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.

  10. #10
    Membre expert Avatar de air-dex
    Homme Profil pro
    Inscrit en
    août 2010
    Messages
    1 614
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France

    Informations forums :
    Inscription : août 2010
    Messages : 1 614
    Points : 3 616
    Points
    3 616
    Par défaut
    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.
    "Ils ne savaient pas que c'était impossible alors ils l'ont fait." Mark Twain

    Mon client Twitter Qt cross-platform Windows et Linux. (en cours de développement).

  11. #11
    Membre éclairé
    Homme Profil pro
    Développeur
    Inscrit en
    août 2003
    Messages
    497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : août 2003
    Messages : 497
    Points : 899
    Points
    899
    Par défaut
    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

Discussions similaires

  1. Réponses: 3
    Dernier message: 02/12/2020, 19h12
  2. Réponses: 1
    Dernier message: 18/07/2020, 16h06
  3. Réponses: 0
    Dernier message: 02/06/2020, 17h58
  4. GNOME 3.18 est officiellement disponible
    Par Stéphane le calme dans le forum Gnome
    Réponses: 2
    Dernier message: 25/09/2015, 09h01
  5. GNOME 3.16 est officiellement disponible
    Par Stéphane le calme dans le forum Gnome
    Réponses: 2
    Dernier message: 02/04/2015, 09h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo