Comment migrer de Bootstrap 4 vers Bootstrap 5?
Retirez la dépendance jQuery et remplacez par JavaScript Vanilla pour les composants bootstrap. 2. Mettez à jour les noms de classe comme .float-left à .float-start et .ml-auto à .ms-uto. 3. Remplacez les composants supprimés (par exemple, .Media) par des utilitaires ou Flexbox. 4. Utilisez l'objet global bootstrap pour l'initialisation JavaScript (par exemple, new bootstrap.modal ()). 5. Ajustez les écouteurs des événements pour utiliser les noms d'événements minuscules (montrés.bs.modal). 6. Déposez les composants non pris en charge (affix, panneau, etc.) et assurez-vous que Popper V2 est utilisé. 7. Testez l'interactivité après migration des fichiers et mis à jour progressivement le code.
La mise à niveau de Bootstrap 4 à Bootstrap 5 implique plusieurs modifications clés. Le processus n'est pas seulement un échange de version simple - il y a des changements de rupture, des dépendances supprimées et des composants mis à jour. Voici comment gérer la migration en douceur.
Supprimer la dépendance jQuery
Bootstrap 5 ne s'appuie plus sur jQuery. Tous les composants JavaScript sont maintenant écrits en JavaScript Vanilla.
- Supprimez toutes les balises de script jQuery de votre HTML s'ils ne sont utilisés que pour bootstrap.
- Mettez à jour les scripts personnalisés qui appellent les plugins Bootstrap jQuery. Remplacez-les par la nouvelle API basée sur DOM.
- Par exemple, au lieu de $ ('# modal'). Modal () , utilisez un nouveau bootstrap.modal (document.getElementById ('modal')) .
Mettre à jour les noms de classe et les services publics obsolètes
Plusieurs classes ont été renommées ou supprimées dans Bootstrap 5.
- Changer .float-left et .float-droite à .float-start et .float-end .
- Remplacer les classes d'alignement .D-FLEX : .ml-Auto devient .ms-Auto , et .mr-Auto devient .me-Auto (démarrage / fin au lieu de gauche / droite).
- Composant Drop .Media - il est supprimé. Utilisez directement des classes utilitaires ou Flexbox.
- Les formulaires personnalisés sont remplacés par des classes de formulaires natives comme .Form-Control et .Form-Check .
Ajuster l'initialisation et les événements JavaScript
La façon dont les composants JavaScript bootstrap sont initialisés ont changé.
- Utilisez l'objet global de bootstrap : bootstrap.tooltip , bootstrap.popover , etc.
- Pour activer les info-bullets à l'échelle mondiale, exécutez: const ToolTipTriggerList = Document.QuerySelectorall ('[data-bs-toggle = "ToolTip"]') const ToolTipList = [... ToolTipTriggerList] .map (ToolTipTriggerEL => nouveau bootstrap.tooltip (ToolTipTriggerel))
- Les noms d'événements sont désormais minuscules: montré.bs.modal au lieu de montrer.bs.modal (même nom, mais assurer la cohérence du cas).
Vérifiez les composants et les dépendances abandonnées
Certaines fonctionnalités ont été supprimées ou nécessitent une manipulation manuelle.
- JQuery n'est pas pris en charge - supprimez-le à moins que d'autres bibliothèques n'en aient besoin.
- Affix, panneau, vignette et composants de puits abandonnés - Remplacez par des CSS personnalisés ou un balisage alternatif.
- Le support Internet Explorer 10/11 est supprimé - si vous devez les soutenir, restez sur bootstrap 4.
- Assurez-vous que votre processus de construction utilise Popper V2 (Bootstrap 5 le nécessite pour les dropdowns, les info-bulles, les popovers).
Fondamentalement, migrez étape par étape: mettez d'abord les fichiers CSS et JS, corriger les noms de classe, supprimer jQuery, puis adapter les initialisations JavaScript. Testez soigneusement tous les composants interactifs. Cela prend du temps, mais la base de code plus propre et une réactivité améliorée dans Bootstrap 5 en valent la peine.
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Stock Market GPT
Recherche d'investissement basée sur l'IA pour des décisions plus intelligentes
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Tutoriel sur la migration des brouillons Douyin vers un nouvel appareil
Mar 26, 2024 pm 02:50 PM
Au cours du parcours créatif de Douyin, les utilisateurs peuvent avoir soigneusement édité un brouillon de Douyin sur un téléphone mobile, mais, pour diverses raisons, souhaitent continuer l'édition ou terminer la publication sur un autre téléphone mobile. Mais je ne sais pas comment transférer des brouillons vers un autre téléphone. Mais ne vous inquiétez pas, le système Douyin nous a déjà fourni une fonction de migration pratique. Pour les utilisateurs qui ne le savent pas encore, venez suivre cet article pour effectuer la migration et continuer à créer sur votre nouveau téléphone ! Comment migrer les brouillons Douyin vers un autre téléphone mobile ? 1. Après avoir ouvert l'application Douyin pour accéder à l'interface, cliquez sur « Moi » dans le coin inférieur droit pour entrer, puis cliquez sur « Draft Box » sous les œuvres sur ma page pour l'ouvrir. 2. Après être entré dans l'interface de la boîte de brouillon, il y a un bouton « Sélectionner » en haut à droite, cliquez dessus pour entrer. 3. Ensuite, chaque projet de boîte de travail sera publié
Linux et Docker : Comment migrer et synchroniser les conteneurs entre les hôtes ?
Jul 29, 2023 pm 02:52 PM
Linux et Docker : Comment migrer et synchroniser les conteneurs entre les hôtes ? Résumé : Docker est une technologie de conteneurisation populaire qui fournit une solution de virtualisation légère. Dans un environnement multi-hôtes, il est très courant de migrer et de synchroniser les conteneurs entre les hôtes. Cet article explique comment utiliser Linux et Docker pour implémenter la migration entre hôtes et la synchronisation des conteneurs, et fournit un exemple de code pour référence. Introduction L'essor de la technologie de conteneurisation rend le déploiement et la migration des applications plus flexibles et plus efficaces. sur plusieurs hôtes
Comment migrer l'historique des discussions WeChat vers un nouveau téléphone
Mar 26, 2024 pm 04:48 PM
1. Ouvrez l'application WeChat sur l'ancien appareil, cliquez sur [Moi] dans le coin inférieur droit, sélectionnez la fonction [Paramètres] et cliquez sur [Chat]. 2. Sélectionnez [Migration et sauvegarde de l'historique des discussions], cliquez sur [Migrer] et sélectionnez la plate-forme vers laquelle vous souhaitez migrer l'appareil. 3. Cliquez sur [Sélectionner les discussions à migrer], cliquez sur [Sélectionner tout] dans le coin inférieur gauche ou sélectionnez vous-même les enregistrements de discussion. 4. Après la sélection, cliquez sur [Démarrer] dans le coin inférieur droit pour vous connecter à ce compte WeChat à l'aide du nouvel appareil. 5. Scannez ensuite le code QR pour lancer la migration des enregistrements de discussion. Les utilisateurs n'ont qu'à attendre la fin de la migration.
Comment effectuer une migration de serveur dans le système Linux
Jun 18, 2023 pm 10:01 PM
Dans les systèmes informatiques d'entreprise, la migration des serveurs est une tâche régulière qui peut aider les entreprises à améliorer l'utilisation des serveurs, à répondre aux besoins de l'entreprise, à mettre à jour l'équipement matériel, etc. Bien que la migration de serveurs dans les systèmes Linux présente certains défis, avec une planification et une mise en œuvre raisonnables, ce travail peut être rendu simple et efficace. Ci-dessous, nous présenterons quelques étapes clés pour la migration de serveur dans les systèmes Linux. Travail de préparation Avant d'effectuer la migration du serveur, certaines préparations doivent être effectuées sur le serveur source et le serveur cible.
Comment migrer et intégrer des projets dans GitLab
Oct 27, 2023 pm 05:53 PM
Comment migrer et intégrer des projets dans GitLab Introduction : Dans le processus de développement logiciel, la migration et l'intégration de projets sont une tâche importante. En tant que plate-forme d'hébergement de code populaire, GitLab fournit une série d'outils et de fonctions pratiques pour prendre en charge la migration et l'intégration de projets. Cet article présentera les étapes spécifiques de la migration et de l'intégration du projet dans GitLab, et fournira quelques exemples de code pour aider les lecteurs à mieux comprendre. 1. Migration de projet La migration de projet consiste à migrer la base de code existante d'un système de gestion de code source vers GitLab
Modernisation du cloud avec C++ : migration des applications héritées vers le cloud
Jun 01, 2024 am 09:21 AM
La meilleure façon de déplacer les anciennes applications C++ vers le cloud : Restructuration : migrez le code de l'application vers une plate-forme cloud native (telle que Kubernetes) et exploitez les services cloud. Cloudification : déployez des applications sur des plates-formes cloud et utilisez les services cloud sans refactorisation du code.
Comment transférer l'historique des discussions WeChat vers un autre téléphone mobile
May 08, 2024 am 11:20 AM
1. Sur l'ancien appareil, cliquez sur « Moi » → « Paramètres » → « Chat » → « Migration et sauvegarde de l'historique des discussions » → « Migrer ». 2. Sélectionnez l'appareil de la plate-forme cible à migrer, sélectionnez les enregistrements de discussion à migrer et cliquez sur « Démarrer ». 3. Connectez-vous avec le même compte WeChat sur le nouvel appareil et scannez le code QR pour démarrer la migration de l'historique des discussions.
Comment migrer l'historique des discussions WeChat vers un autre téléphone
Mar 26, 2024 pm 04:50 PM
En ouvrant WeChat sur l'ancien appareil, en sélectionnant « Migration et sauvegarde de l'historique des discussions » et en suivant les invites, les utilisateurs peuvent migrer leur historique de discussions vers le nouvel appareil. Le processus de migration consiste à sélectionner les discussions à migrer, à scanner le code QR et à attendre la fin de la migration.
