Blocs prend désormais en charge plusieurs versions du framework Bootstrap et inclut également des fonctionnalités intégrées supplémentaires pour migrer facilement un projet vers la dernière version.
Comment migrer
Pour migrer un projet vers Bootstrap 5, ouvrez le Paramètres du projet et définissez le cadre déroulant vers Bootstrap 5. Le processus de migration commencera alors et vous notifiera quand il sera terminé.
Changements importants
La Blocs fonction de migration automatisée ne fera migrer que le code qui Blocs a créé, il ne migrera aucun code personnalisé qui a été ajouté à un projet via pièces jointes, Éditeur de code ou Widget de code. Pour aider à résoudre les problèmes, nous vous recommandons de vous familiariser avec le Documentation sur la migration Bootstrap 5.
Stylisme
Il existe un certain nombre de différences de style visuel mineures dans Bootstrap 5, cependant, la plus notable est le fait que tous les liens sont maintenant soulignés par défaut, pour aider à améliorer l'accessibilité du site.
Structure
Toutes les barres de navigation ont maintenant un conteneur à l'intérieur. Cela simplifie considérablement les exigences d'espacement et supprime le besoin de remplacements CSS étendus.
javascript
Bootstrap 5 ne nécessite plus ni n'utilise Jquery. Cela signifie que Jquery n'est pas inclus dans les sites Bootstrap 5, par défaut. Cette modification a le potentiel de casser le javascript personnalisé qui a été ajouté à un projet.
A l'exportation, Blocs analysera toutes les pièces jointes javascript, en les inspectant pour toute référence évidente à Jquery. Si des références sont trouvées, Blocs inclura automatiquement Jquery avec le site.
Veuillez noter que tout code Jquery ajouté à un projet via l'éditeur de code ne déclenchera pas l'inclusion automatique de Jquery.
Attributs de données
Les attributs de données pour tous les JavaScript (modaux, carrousels, info-bulles, etc.) sont désormais espacés de noms pour aider à distinguer les fonctionnalités Bootstrap des tierces parties. Par exemple, Bootstrap 5 utilise bascule data-bs au lieu de bascule de données. Vous trouverez ci-dessous une liste des attributs de données les plus courants qui ont changé, veuillez vous reporter au Documentation sur la migration Bootstrap 5 pour une liste complète.
- bascule de données > bascule data-bs
- placement de données > placement de données bs
- parent de données > données-bs-parent
- rejet de données > données-bs-rejet
- trajet de données > data-bs-ride
- diapositive de données > données-bs-slide
- glissement de données vers > données-bs-slide-to
Cours
Il y a un certain nombre de changements dans les noms de classe dans Bootstrap 5, ci-dessous est une liste des classes les plus courantes qui ont changé. Veuillez vous référer au Documentation sur la migration Bootstrap 5 pour une liste complète.
Formulaires
- contrôle personnalisé > vérification de formulaire
- commutateur personnalisé > commutateur de formulaire
- entrée de contrôle personnalisée > formulaire-contrôle-saisie
- étiquette de contrôle personnalisée > formulaire-check-label
Intégrations réactives
- intégré-réactif > rapport
- intégrer-responsive-16by9 > rapport-16 × 9
- intégrer-responsive-4by3 > rapport-4 × 3
- intégrer-responsive-4by4 > rapport-4 × 4
- intégrer-responsive-9by16 > rapport-9 × 16
Marge et rembourrage
- ml-0 > ms-0
- ml-1 > ms-1
- ml-2 > ms-2
- ml-3 > ms-3
- ml-4 > ms-4
- ml-5 > ms-5
- ml-auto > ms-auto
- mr-0 > moi-0
- mr-1 > moi-1
- mr-2 > moi-2
- mr-3 > moi-3
- mr-4 > moi-4
- mr-5 > moi-5
- m-auto > moi-auto
- pl-0 > PS-0
- pl-1 > PS-1
- pl-2 > PS-2
- pl-3 > PS-3
- pl-4 > PS-4
- pl-5 > PS-5
- pl-auto > ps-auto
- pr-0 > pr-0
- pr-1 > pe-1
- pr-2 > pe-2
- pr-3 > pe-3
- pr-4 > pe-4
- pr-5 > pe-5
- pr-auto > pe-auto
Alignement
- flottant à gauche > démarrage flottant
- Flotter à droite > extrémité flottante
- texte-gauche > début de texte
- texte-droit > fin de texte
Popovers et info-bulles
- flèche > info-bulle-flèche
- flèche > flèche-popover
Divers
- sr uniquement > visuellement caché
- pas de gouttières > g-0
- btn-block > en 100