Bootstrap 5 est arrivé

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par yule, 9 Décembre 2020.

  1. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    415
    J'aime reçus:
    41
    Hello,

    Pour ceux et celles qui adorent / utilisent ce framework, Bootstrap vient de de passer à la version 5 ! Passablement de changement et du job en perspective pour se mettre à jour...

    Je m'étais un peux amusé avec la version alpha mais depuis hier ou aujourd'hui, la version v5.0.0-beta1 est sur la place ! A vos claviers.. Enfin ça va être mon cas, je vais profiter pour mettre à jour mon site (à la mano) avec celle nouvelle version qui en substance offrira ou pas

    - Plus de bibliothèque jQuery (pageSpeed Insight devrait apprécier..)
    - Introduction des propriétés personnalisées CSS (Ciaoooo IE !!!)
    - Extension des grids (plus de classes et de dimensions à choix)
    - Une doc toujours aussi précise et utile (bon j'aime tellement que ce n'est que mon avis..)

    Du job en perspective pour s'adapter aux avantages qu'offre cette nouvelle mouture (il y a aussi des inconvénients mais bon.. )

    Bonne bonne
    Yule
     
    #1 yule, 9 Décembre 2020
    emualliug, spout et nicodak aiment ça.
  2. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 777
    J'aime reçus:
    269
    Mais "beta" c'est pas une release finale, du moins de mon temps les beta c'était juste pour les testeurs o_O
    Je vois qu'ils ont ajouté des icônes SVG surtout.
     
    #2 rick38, 9 Décembre 2020
  3. nicodak
    nicodak WRInaute discret
    Inscrit:
    21 Octobre 2020
    Messages:
    78
    J'aime reçus:
    25
    salut, est-ce que vous utilisiez Bootstrap via un CDN ou hébergé sur votre propre serveur ?

    Dans le cas d'une utilisation via CDN vous mettez à jour le lien positionné dans les balises <head> puis vous mettez à jour votre code ? C'est cela ?
    Les classes restent les mêmes d'une version à l'autre je suppose ?

    A bientôt.
     
    #3 nicodak, 9 Décembre 2020
  4. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 936
    J'aime reçus:
    183
    C'est bien d'utiliser des frameworks mais comme tout open-source, bah ça change trop souvent !
    Perso, je préfère héberger le code pour une question de stabilité et maintenabilité.
     
    #4 passion, 9 Décembre 2020
    nicodak apprécie ceci.
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 177
    J'aime reçus:
    328
    Cool on va pouvoir s'écarter un peu plus de jQuery.
    J'attends la version Bootswatch pour mes sides projects.

    @nicodak j'installe tous les packages JS avec npm et compilés avec Webpack.
     
    #5 spout, 10 Décembre 2020
    nicodak et cthierry aiment ça.
  6. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 777
    J'aime reçus:
    269
    Moi ça ne va pas me permettre d'enlever jQuery, j'en ai besoin pour mon code à moi :D
     
    #6 rick38, 10 Décembre 2020
  7. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 177
    J'aime reçus:
    328
    #7 spout, 10 Décembre 2020
  8. nicodak
    nicodak WRInaute discret
    Inscrit:
    21 Octobre 2020
    Messages:
    78
    J'aime reçus:
    25
    :rolleyes:

    Ce sont des membres comme vous dont j'ai besoin dans ma communauté... Mais ça viendra, avec le temps...
    Merci pour les réponses (et pour les nouvelles questions que je me pose ! :D)

    nb: trouver un tuto sur npm.
     
    #8 nicodak, 10 Décembre 2020
  9. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 177
    J'aime reçus:
    328
    @WebRankInfo est tjs en train de rembourser le crédit qu'il a dû faire :D
     
    #9 spout, 10 Décembre 2020
    yule apprécie ceci.
  10. nicodak
    nicodak WRInaute discret
    Inscrit:
    21 Octobre 2020
    Messages:
    78
    J'aime reçus:
    25
    Plus sérieusement, j'ai un peu de mal à suivre comment sont gérés les CDN des différents Framework et Bibliothèques de développement.

    Par exemple pour Bootstrap, pourquoi il y a tant de CDN différents ? Certains sont délivrés par JSdeliver, d'autres par MaxCDN, quelle est la différence ? Aucune ? ils délivrent le même contenu ?
    Pourquoi il n'y a pas un CDN officielle Bootstrap fourni par Bootstrap ?

    Le fait que ce soit open-source avec des ajouts/modifications par des centaines de développeurs, est-ce que tout le monde utilise, par exemple pour Bootstrap 4, exactement le même outil ?

    Ok les packages JS de Bootstrap vous voulez dire ? Il y en a plusieurs ?
    Pourquoi les compiler ?

    Merci pour vos éclairages.
     
    #10 nicodak, 10 Décembre 2020
  11. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 177
    J'aime reçus:
    328
    Concurrents qui se servent de ça pour faire leur pub. C'est les mêmes fichiers.

    Ca coûte de l'argent, dans la doc ils mettent les exemples avec JSDelivr.

    Oui la plupart, d'autres font leur propres bundles spécifiques.

    Des milliers ! https://www.npmjs.com/

    Les langages on chacun leur gestionnaire de dépendances :
    - PHP: Composer
    - Python: PyPI
    - .NET: NuGet
    - JS: NPM
    - ...

    https://medium.com/jsjitsu/webpack-à-quoi-ça-sert-et-comment-sen-servir-a5e4ecee8815
     
    #11 spout, 10 Décembre 2020
    yule et nicodak aiment ça.
  12. nicodak
    nicodak WRInaute discret
    Inscrit:
    21 Octobre 2020
    Messages:
    78
    J'aime reçus:
    25
    Merci pour toutes ces précisions spout
     
    #12 nicodak, 10 Décembre 2020
  13. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 777
    J'aime reçus:
    269
    Perso je n'utilise pas de CND, je génère 1 fichier JS et 1 fichier CSS en y concaténant dedans toutes les librairies.
    Ca évite d'ouvrir une connexion à un autre domaine, la résolution peut parfois prendre du temps théoriquement.

    Rachète WRI, en plus ça parle trop de seo ici et pas assez de dev, d'autant que Google a tué le seo alors que le dev est immortel.
     
    #13 rick38, 10 Décembre 2020
    theunholy, nicodak et spout aiment ça.
  14. nicodak
    nicodak WRInaute discret
    Inscrit:
    21 Octobre 2020
    Messages:
    78
    J'aime reçus:
    25
    C'est surement pas dans mes moyens... :)
    Mais je suppose que les dev qui trainent sur WRI on déjà leurs habitudes sur des forums dev : developpez.net, commentçamarche ou alsacréations, j'en oublie surement...
    Ou encore sur les forums en anglais comme ceux de stackoverflow...
     
    #14 nicodak, 11 Décembre 2020
  15. WebRankInfo
    WebRankInfo Admin
    Membre du personnel
    Inscrit:
    19 Avril 2002
    Messages:
    20 471
    J'aime reçus:
    613
    o_O
     
    #15 WebRankInfo, 11 Décembre 2020
    spout apprécie ceci.
  16. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    415
    J'aime reçus:
    41
    Hello,

    Comme @rick38 je garde le tout chez moi , pas de CND.

    Oui @rick38 je te l'accorde, c'est pas une version release finale, toutefois, je viens de refaire tout le front de mon site avec la version "Alpha", Je bug sur le toogle (version mobile) avec la version "Bêta" mais pour moi et mon utilisation , c'est pas trop grave, on dira surtout que mon site n'est plus accessible sur IE:rolleyes: pour le reste ç'est que cosmétique.

    Chrome, Opéra, Mozilla et Edge ok (ça me suffit)

    Je viens de faire un test avec Google Insight (mobile)

    Bootstrap 4.5.3 pour mon index et selon l'image en backround qui se charge..==> de 88 à 93
    Boostrap 5 (Alpha) pour mon index et selon l'image en backround qui se charge.. ==> 88 et 98 !

    Version ordinateur, je flirt avec le max !

    J'en ai donc profité de lui refaire une beauté : https://freejungle.me (on aime ou on aime pas
    ;)) mais sans jquery je ne peux qu'approuver.

    De bonnes fêtes à vous tous !
    Bonne bonne
    Yule
     
    #16 yule, 23 Décembre 2020
  17. nicodak
    nicodak WRInaute discret
    Inscrit:
    21 Octobre 2020
    Messages:
    78
    J'aime reçus:
    25
    C'est propre ! L'effet smooth sur la barre de navigation lorsque l'on scroll rend bien, Je ne me souviens plus mais elle était colorée avant n'est-ce pas ? En tout le site est toujours aussi agréable à l'œil.
    (Les background sont fait-maison ?)

    Pourquoi ces remarques sur jQuery ? Il faut éviter de l'utiliser, il ralentirait les sites c'est ça ?
    Merci !
     
    #17 nicodak, 23 Décembre 2020
  18. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    415
    J'aime reçus:
    41
    Merci ! Oui elle était noir. (bonne mémoire !)
    Pour les Backround, malheureusement pas (acheté en grande partie sur EnvatoMarket) prix correct...

    S'agissant de Jquery, te connaissant, tu vas pas te suffire d'un mini résumé, dès lors, voici une belle explication ici

    En substance, Un de ces changements majeurs sera la disparition de jQuery de Boostrap, au profit du framework Vanilla JS. Pour ceux qui ne le connaitraient pas, Vanilla JS est un framework orienté pour procurer la meilleure performance possible à l'exécution. Vanilla JS est extrêmement léger. C'est même, incontestablement, le plus léger framework JavaScript.

    A+
    Yule

    NB: J'ai non plus pas assez de connaissances dans la prog, je suis autodidacte qui aime avoir les mains dans le camboui... Après si la réparation fonctionne, c'est une autre paire de manche.. Mais je table énormément sur la rapidité de mon site.. pour le reste et comme je vends rien, ça n'a pas d'importance
     
    #18 yule, 23 Décembre 2020
    Dernière édition: 23 Décembre 2020
  19. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 177
    J'aime reçus:
    328
    #19 spout, 23 Décembre 2020
  20. nicodak
    nicodak WRInaute discret
    Inscrit:
    21 Octobre 2020
    Messages:
    78
    J'aime reçus:
    25
    Merci pour le lien, même si tout ça me dépasse un peu (beaucoup) c'est intéressant. De ce que je comprends c'est une façon d'apurer Bootstrap en supprimant une couche qui apportaient des fonctionnalités qui peuvent être finalement gérées nativement par JS.

    Pourtant Bootstrap 4 pouvait fonctionner sans jQuery déjà non ? (puisqu'en plus du CDN Bootstrap il fallait si besoin charger également le CDN jQuery)
    Mais dans ce cas là Bootstrap avait moins de fonctionnalités, c'est cela ?

    Donc c'est une mauvaise nouvelle pour jQuery parce que Bootstrap semble très populaire.
    C'est à dire qu'il a fallu réécrire les fonction jQuery en Vanilla ?
     
    #20 nicodak, 23 Décembre 2020
  21. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 177
    J'aime reçus:
    328
    Oui sauf certains composants (tabs, tooltip, ...)

    Oui, mais assez simple dans l'ensemble.

    Code:
    $(function () {})
document.addEventListener('DOMContentLoaded', function () {})

$('#foobar')
document.getElementById('foobar')

$('.foobar')
document.querySelectorAll('.foobar').forEach(element => {})

$('#foobar').append('<p>Test</p>')
document.getElementById('foobar').insertAdjacentHTML('beforeend', '<p>Test</p>')

// etc
     
    #21 spout, 23 Décembre 2020
    nicodak apprécie ceci.
  22. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    415
    J'aime reçus:
    41
    @spout j'ai vu aussi que tu as pris les icons de Bootstrap.. Tu en penses quoi pour rester dans du "léger.." ?

    J'ai essayé icofont mais plus rien d'actualisé depuis 2018 et maintenant j'essaye lineicons mais à part la version payante, bof...

    A+
    Yule
     
    #22 yule, 23 Décembre 2020
  23. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 177
    J'aime reçus:
    328
    @yule je n'ai pas comparé la taille, j'ai pris celles de Bootstrap au lieu de Font-Awesome parce que c'est intégré comme dans la version 2 (glyphicons) et qu'il y en a qd même 1200.
     
    #23 spout, 23 Décembre 2020
  24. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    415
    J'aime reçus:
    41
    Ok merci @spout , je vais essayer à l'occase, mais avant, il faudra un peu plus d'icone fantaisiste
     
    #24 yule, 23 Décembre 2020
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
Similar Threads - Bootstrap arrivé Forum Date
Astuce Bootstrap/menu déroulant Demandes d'avis et de conseils sur vos sites 26 Mai 2020
Back end en Bootstrap ! Développement d'un site Web ou d'une appli mobile 17 Août 2019
Personnnalisation des métas et bootstrap Débuter en référencement 22 Novembre 2015
Balise H1/H2/H3 avec page bootstrap Débuter en référencement 30 Avril 2015
Création d'un site internet avec Bootstrap Développement d'un site Web ou d'une appli mobile 27 Mars 2015
Votre avis sur les framework CSS/JS : Bootstrap, Foundation, skeleton.. Développement d'un site Web ou d'une appli mobile 26 Février 2014
bootstrap span longueur row-fluid Développement d'un site Web ou d'une appli mobile 8 Septembre 2013
Bootstrap Débuter en référencement 11 Juillet 2013
je n arrive pas a masquer les variables dans mon url URL Rewriting et .htaccess 31 Juillet 2021
J'ai crée un site mais je n'arrive pas a voir du trafic et des clients . Demandes d'avis et de conseils sur vos sites 9 Mai 2021