Trucsweb.com

Trucsweb.com
Attention, le site des Trucsweb est à la recherche d'un partenaire pour héberger le site des Trucsweb. Contactez-nous.
Trucsweb 1997-2020 - 23 ans de partage - Payez-moi un café ; -)

CSS

Framework

RDFFav

Bootstrap 5 Alpha 2

Une nouvelle version en travail du populaire cadriciel sans dépendance à jQuery ! Bootstrap 5 Alpha 1, Bootstrap 5 Alpha 2, Bootstrap 5 Alpha 3Bootstrap 5 Alpha 2

« Bootstrap no longer depends on jQuery and we’ve dropped support for Internet Explorer. »

Un des plus gros défauts des cadriciels comme Bootstrap c’est le poids. Bootstrap vient sans doute de prendre quelques kilos, mais avec une maudite bonne ablation ; -)

Version 5 alpha 1

Quand j’ai lu cette grande nouvelle en juin dernier (un jour avant ma fête!) c’était comme un cadeau. Le retrait de la dépendance à jQuery, Bravo ! Chanceux celui qui développement toujours, autant que possible, en pur JavaScript (Vanilla)... Car la plupart des sites Web dépendent aujourd’hui de jQuery, des millions de scripts et d’IU souvent carrément signé jQuery...

Bootstrap 5

NOTE : Il sera toujours possible d’utiliser jQuery. En détectant la librairie jQuery dans l’objet window, Bootstrap ajoutera automatiquement toutes ses composantes dans le système de plugins de jQuery !

Sans plus! Cette grande nouvelle proposait peu de nouveauté. J’avais abandonné l’idée d’en faire un tutoriel. Si je n’ai rien écrit, c’est aussi parce que la migration de la version 4 à la version 5 alpha 1 n’a rien de bien compliqué. Personnellement, j’ai surtout eu à adapter mes codes au retrait des sélections perso et à un petit changement avec les groupes de saisie (input group), sans plus.

Sinon, Bootstrap parle d’un gros travail sur la documentation et d’une refonte complète des éléments de formulaires, peu visibles toutefois. Boites à cocher, boutons radio... L’amélioration du système de grille, davantage de points d’arrêt (breakpoints), le navbar-expand-xxl et le container-xxl, col-xxl- à 1320px par exemple (et le retour du xs avec la version 5 alpha 2!), le retrait du flex: 1 0 100% des « row » et surtout l’ajout de colonnes autonomes et l’intéressant line-height : .lh-1, .lh-sm, .lh-base et .lh-lg.

Ha, et un exemple avec Masonry de David DeSandro.

Rien à voir avec la migration cauchemardesque de la version 3 à la version 4. Enfin, le tutoriel attendra la prochaine version...

Version 5 alpha 2
Source getbootstrap.com
Positionnement absolu - Source getbootstrap.com

Aujourd’hui, 30 septembre 2020, je suis aussi bien heureux de la nouvelle version 5 alpha 2 que j’attendais avec impatience. Avec à peine plus de viande autour de l’os (consultez les notes de version). Un meilleur support pour les thèmes foncés, sous-menu, carrousel foncé dropdown-menu-dark, carousel-dark et surtout le positionnement absolu (top, right, bottom et left) à 0%, 50% ou 100%.

Du débogage, des ajustements du genre sr-only et .sr-only-focusable remplacées par visually-hidden et visually-hidden-focusable. Personnellement je dois surtout ajuster deux éléments en passant à la nouvelle version. Le ratio de mes vidéos embed-responsive embed-responsive-16by9 devient ratio ratio-16x9 et le bouton « fermer », d’une fenêtre modale par exemple, passe de la classe close à btn-close. Une petite nouveauté que je vais utiliser souvent pour les bordures. Mais la version 5 alpha 3 à venir promet aussi la refonte complète des composantes de groupe de saisie (input group) amorcée par la version 5 alpha 1. Avec le retrait de jQuery, c’est la grosse nouvelle de la prochaine version 5.


Feuille de styles et librairie JavaScript
<!-- Feuille de style CSS Bootstrap 5 alpha 2 -->
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css"
  integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK"
  crossorigin="anonymous"
/>

<!-- Javascript Bootstrap 5 alpha 2 Bundle avec Popper.js -->
<script 
  src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"
  integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD"
  crossorigin="anonymous">
</script>
Version 5 alpha 3 bientôt !

Alors si la version 5 alpha 3 promet encore un bouleversement au niveau des formulaires, quelques nouveautés comme les outils très attendus pour la grandeur de polices, aussi bien attendre la version 5 alpha 3 si vous n’avez pas encore fait le saut !!

Conclusion

J’utilise déjà depuis le 15 juin 2020 la version 5 alpha 1 et les quelques problèmes rencontrés semble déjà avoir trouvé écho dans l’équipe de Bootstrap puisque la version 5 alpha 2 en corrige plusieurs. Comme la correction de l’infobulle (tooltip) lors du survol d’un élément enfant. J’ai carrément passé à la version 5 alpha 2 ce matin. Mon premier constat, les puristes comme moi y verront un tas davantage, les autres moins, voir pas du tout. On verra à faire une revu plus étoffée de la version 5 lors de la sortie prochaine de la version 5 alpha 3.

Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

10/10 sur 1 revues.
       Visites : 119 - Pages vues : 178
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@