Ce qui est nouveau dans Bootstrap 5 & # x27;

Bootstrap 5, la dernière itération du cadre CSS populaire, possède de nombreuses améliorations et raffinements. Cet article plonge dans les modifications, ajouts et déménagements clés dans Bootstrap 5, offrant un aperçu complet de la mise à niveau des développeurs ou du recadrage.

Améliorations de clés:

• JQuery Independence: Bootstrap 5 élimine sa dépendance à JQuery, améliorant la compatibilité avec les cadres JavaScript modernes comme React. Popper.js est maintenant utilisé pour le positionnement dynamique.
• Prise en charge améliorée du navigateur: Lors de la suppression de la suppression d'Internet Explorer, Bootstrap 5 exploite les propriétés personnalisées CSS modernes et les API JavaScript pour des performances et une compatibilité améliorées avec les navigateurs actuels (Firefox 60, Chrome 60, Safari 12, Android Browser, navigateur actuel (Firefox 60, Chrome 60, Safari 12, Android Browser Android (Firefox 60, Chrome 60, Safari 12, Android Browser Android. / WebView 6).
• Espace de noms d'attribut de données: Les attributs de données sont maintenant compensés par noms data-bs-*, distinguant clairement le comportement javascript de Bootstrap des autres scripts.
• Bibliothèque de composants étendus: De nouveaux composants comme les barres latérales OffCanvas et les étiquettes de formulaires flottantes améliorent les capacités du cadre pour créer des dispositions interactives et réactives.
• Personnalisation avancée: Les variables SASS, les mixins et les propriétés personnalisées CSS mis à jour offrent une plus grande flexibilité dans le thème et le style.
• Documentation rationalisée: La documentation a subi une refonte significative, avec une navigation améliorée, des guides de personnalisation détaillés et une convivialité améliorée.

Quand utiliser (et ne pas utiliser) bootstrap:

Bootstrap reste un outil très efficace pour créer des sites Web réactifs et axés sur les mobiles, en particulier pour les débutants. Sa facilité d'utilisation, ses composants prédéfinis et sa courbe d'apprentissage basse le rendent idéal pour divers projets. Cependant, il est crucial de reconnaître ses limites. Pour les projets complexes ou les priorités de la taille minimale du fichier, les cadres alternatifs peuvent être plus appropriés. La dépendance excessive sur Bootstrap peut conduire à un balisage gonflé, donc une solide compréhension des technologies Web sous-jacentes est essentielle.

Mise à niveau de Bootstrap 4:

La mise à niveau du bootstrap 4 est généralement simple. La plupart des composants et des classes demeurent, mais les développeurs doivent examiner attentivement la liste des composants abandonnés et s'adapter en conséquence. L'objectif principal devrait être de remplacer data-* les attributs par data-bs-* et de traiter les composants obsolètes ou les variables SASS renommées.

Modifications détaillées:

Cette section résume les changements de base, en se concentrant sur les altérations les plus percutantes:

• JQUERY Élimination: Le passage à la vanille JavaScript réduit considérablement la taille du cadre et améliore les performances. L'utilisation de jQuery existante est toujours prise en charge, mais peut être désactivée à l'aide de l'attribut data-bs-no-jquery="true".
• IE La prise en charge est supprimée: Cela permet une utilisation optimisée des fonctionnalités CSS et JavaScript modernes.
• Renommoration des attributs de données: L'espace de noms data-bs-* améliore la clarté et empêche les conflits.
• Correction de bogues: De nombreux bogues présents dans Bootstrap 4 ont été résolus.

Caractéristiques obsolètes:

Plusieurs composants et classes de services publics ont été supprimés en raison de la redondance ou de l'obsolescence. Ceux-ci incluent (mais sans s'y limiter): le support IE, certaines classes de badge et de bouton, Jumbotron, les dispositions de cartes de maçonnerie et plusieurs classes de services publics liées à la commande, aux médias et aux tables. Ces fonctionnalités peuvent souvent être reproduites à l'aide de classes d'utilité existantes.

Nouvelles fonctionnalités:

Bootstrap 5 présente plusieurs ajouts passionnants:

• Tailles de police réactives (RFS): activées par défaut, RFS améliore la réactivité entre différentes tailles d'écran.
• Droits de droite à gauche (RTL): La prise en charge RTL complète est désormais intégrée, ce qui rend le bootstrap adapté à une gamme plus large de langues et de locaux.
• nouveau xxl point d'arrêt: Ce point d'arrêt s'adresse à des écrans extra-larges (≥ 1400px).
• Documentation améliorée: La documentation réorganisée et améliorée améliore considérablement l'expérience utilisateur.
• Les nouveaux composants: L'accordéon, les étiquettes de l'accordéon et les étiquettes flottantes sont parmi les ajouts notables.

Conclusion:

Bootstrap 5 représente un pas en avant significatif, équilibrant les améliorations des performances avec des fonctionnalités améliorées et des options de personnalisation. Bien que certaines fonctionnalités aient été supprimées, la mise à niveau globale offre un cadre plus rationalisé, efficace et polyvalent pour créer des sites Web modernes et réactifs.

Questions fréquemment posées (FAQ):

La section FAQS fournit des réponses concises aux questions courantes sur Bootstrap 5, couvrant les principales différences par rapport à Bootstrap 4, stratégies de migration, nouvelles fonctionnalités, fonctionnalité API utilitaire, extensions de palette de couleurs, mises à jour de contrôle de formulaire, nouvelle bibliothèque d'icônes SVG, améliorations de documentation, Compatibilité du navigateur et démarrage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!