Home-theater-designers
Bootstrap 5 a apporté des changements majeurs, notamment la suppression de la prise en charge d'Internet Explorer (IE) et de la dépendance jQuery. Développé par Twitter, Bootstrap est le framework CSS le plus populaire au monde. Le framework d'interface utilisateur open source cherche à se positionner pour l'avenir, ce qui l'a amené à apporter des changements révolutionnaires dans la v5.
La suppression de Bootstrap pour IE en a fait le premier outil de développement Web à le faire. Cette décision intervient alors que la part de marché d'Internet Explorer continue de diminuer, représentant moins de 3% de tous les navigateurs Web.
Lisez la suite pour voir quelles autres améliorations ont été apportées à Bootstrap et comment elles vous affectent.
1. Prise en charge de jQuery
Bootstrap n'utilisera plus la bibliothèque jQuery. L'équipe de développement a plutôt amélioré la bibliothèque JavaScript pour effectuer ce changement. La dépendance jQuery n'était pas nécessairement une mauvaise chose dans Bootstrap.
En fait, l'introduction de jQuery a radicalement changé la façon dont JavaScript était utilisé. Cela a simplifié les tâches d'écriture en JavaScript qui auraient autrement pris de nombreuses lignes de code.
En rapport: Apprenez à créer un élément dans jQuery
Malgré tout cela, l'équipe a décidé de s'en débarrasser. Cela s'accompagne de l'avantage de fichiers source plus petits et de temps de chargement de page plus élevés. Il s'agissait d'un changement bien nécessaire qui permettra à Bootstrap d'acquérir un style plus tourné vers l'avenir.
La taille du fichier source est devenue plus légère de 85 Ko de JavaScript minifié, ce qui est essentiel car Google considère les temps de chargement des pages pour les sites mobiles comme un facteur de classement.
Autant l'utilisation de jQuery n'est plus nécessaire dans Bootstrap 5, vous pouvez toujours l'utiliser si vous le souhaitez. Il est également intéressant de noter que tous les plugins JavaScript restent disponibles.
2. Propriétés personnalisées CSS
En supprimant la prise en charge d'Internet Explorer, des propriétés CSS personnalisées (variables) peuvent être utilisées. IE ne prend pas en charge les propriétés personnalisées - c'est l'une des raisons pour lesquelles il a longtemps retenu les développeurs Web.
Les propriétés personnalisées CSS rendent CSS plus flexible et programmable. Les variables CSS sont préfixées par -bs pour éviter les conflits avec des CSS tiers.
Il existe deux types de variables disponibles : les variables racines et les variables composantes.
Les variables racines sont accessibles partout où Bootstrap CSS est chargé. Ces variables sont situées dans le _root.scss et font partie des fichiers dist compilés.
Les variables de composant sont utilisées comme variables locales dans des composants particuliers. Ils sont utiles pour éviter l'héritage accidentel de styles dans des composants tels que des tables imbriquées.
3. Système de grille amélioré
Parce qu'il y a eu quelques problèmes de mise à niveau de la version 3 à 4, Bootstrap 5 conserve cette fois l'essentiel du système, en s'appuyant sur le système existant au lieu de le modifier complètement. Certains des changements sont :
- La classe de gouttière ( .garçons ) a été remplacé par un utilitaire ( .g* ) un peu comme la marge et le rembourrage
- Des classes d'espacement vertical ont également été incluses
- Les colonnes ne sont plus par défaut poste:relatif
4. Documentation améliorée
La documentation a été améliorée avec plus d'informations, notamment en ce qui concerne la personnalisation. Un problème courant était qu'avec de nombreux sites qui utilisent Bootstrap, vous pouviez immédiatement identifier qu'il utilisait Bootstrap. Bootstrap 5 est désormais doté d'une nouvelle apparence et d'une meilleure personnalisation.
Il y a maintenant plus de flexibilité pour personnaliser vos thèmes afin que tous les sites ou applications n'aient pas la même ressemblance. La page de thème v4 a en fait été étendue avec plus de contenu et d'extraits de code pour la construction sur les fichiers Sass (le pré-processeur CSS populaire). Vous pouvez également trouver un projet de démarrage npm sur la plate-forme GitHub qui est disponible en tant que référentiel de modèles.
La palette de couleurs a également été étendue dans la version 5. Le système de couleurs intégré étendu implique que vous pouvez facilement styliser votre coloration sans avoir à quitter votre base de code. Des travaux supplémentaires ont également été effectués pour améliorer le contraste des couleurs, notamment l'ajout d'une métrique de contraste des couleurs dans les documents de couleur Bootstrap.
5. Contrôles de formulaire améliorés
Bootstrap a amélioré ses contrôles de formulaire, ses groupes d'entrée, etc.
Dans la v4, Bootstrap utilisait des contrôles de formulaire personnalisés en plus des valeurs par défaut fournies par chaque navigateur. Dans la v5, ils sont tous désormais personnalisés. Tous les boutons radio, cases à cocher, fichier, plage et plus encore pour leur donner le même aspect et le même comportement sur différents navigateurs.
Les nouveaux contrôles de formulaire ne contiennent plus de balisage coloré inutile, mais se concentrent plutôt sur les fonctionnalités de conception standard et logiques.
6. Bootstrap 5 ajoute une API d'utilitaires
Après les nouvelles bibliothèques CSS comme Tailwind CSS, Bootstrap ajoute désormais également une bibliothèque d'utilitaires. L'équipe d'amorçage se dit heureuse de voir comment d'autres développeurs remettent en question la façon dont nous avons construit sur le Web au cours de la dernière décennie et plus.
Les services publics gagnent du terrain dans la communauté de développement et l'équipe d'amorçage en a pris note. L'équipe avait précédemment ajouté une disposition pour les utilitaires dans la v4 en utilisant global $activer-* Des classes. Dans la v5, ils sont passés à une approche API et à un nouveau langage et syntaxe dans Sass. Cela vous donnera le pouvoir de créer de nouveaux utilitaires tout en étant capable de supprimer ou de modifier les valeurs par défaut données.
Afin d'améliorer l'organisation, certains utilitaires de la v4 ont été déplacés dans la section Helpers.
7. Nouvelle bibliothèque d'icônes Bootstrap
Bootstrap possède désormais sa propre bibliothèque d'icônes SVG open source avec plus de 1 300 icônes. Il est fait sur mesure pour les composants du framework, mais vous pouvez toujours travailler avec eux sur n'importe quel projet.
Étant donné qu'il s'agit d'images SVG, elles peuvent être rapidement mises à l'échelle et peuvent être implémentées de plusieurs manières et également stylisées avec CSS.
Vous pouvez installer les icônes en utilisant au dessus du niveau de la mer:
$ npm i bootstrap-iconsInstaller Bootstrap 5
Vous pouvez aller au Page de téléchargement officielle de Bootstrap 5 si vous souhaitez l'installer. Si vous souhaitez vous tenir au courant de la dernière version de développement, vous pouvez utiliser au dessus du niveau de la mer pour le tirer :
$ npm i bootstrap@next
Au moment d'écrire ces lignes, le framework est dans sa version Beta 3. Cela signifie que le logiciel est sûr à utiliser mais toujours en développement. N'hésitez pas à donner votre avis à l'équipe et à apporter toute contribution nécessaire.
Partager Partager Tweeter E-mail Une introduction aux composants Web et à l'architecture basée sur les composantsJetons un coup d'œil aux composants Web courants et voyons pourquoi ils sont utiles.
Lire la suite Rubriques connexes- La programmation
- Développement web
- JavaScript
- CSS
Jérôme est rédacteur chez MakeUseOf. Il couvre des articles sur la programmation et Linux. Il est également un passionné de crypto et garde toujours un œil sur l'industrie de la crypto.
Plus de Jerome DavidsonAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
comment exécuter des programmes windows sur androidCliquez ici pour vous abonner