L'une des plus grandes différences dans Blocs V5 par rapport à Blocs V2 est le fait Blocs ne crée plus de sites Web en utilisant Bootstrap 3 et utilise à la place le nouveau et amélioré Cadre Bootstrap 4.
Outil de migration
Projets créés en Blocs V2 utiliser le Cadre Bootstrap 3 ce qui n'est évidemment pas idéal, car Bootstrap 3 et 4 sont assez différents. Pourtant, Blocs V5 est livré avec un outil de migration intégré conçu pour aider à convertir Blocs Projets V2 (Bootstrap 3) dans Blocs Projets V5 (Bootstrap 4) avec le moins de perturbations possible.
Lors de la migration d'un Blocs Projet V2 (Bootstrap 3) à un Blocs Projet V5 (Bootstrap 4), vous êtes assuré de remarquer que divers aspects de votre site peuvent nécessiter une attention particulière, cela est dû à un certain nombre de facteurs que nous développerons tout au long de cet article.
Souvenez-vous aussi que Blocs V2 peut fonctionner à côté de Blocs V5, donc si vous avez de grands sites ou des projets avec des délais, évitez de les migrer à moins d'avoir le temps d'apporter des modifications manuelles substantielles qui pourraient être nécessaires.
La chose la plus importante à retenir avant de migrer un projet depuis Blocs V2 à Blocs V5 est de le sauvegarder. Une fois qu'un projet est migré et enregistré, il ne peut plus être annulé, ce qui signifie qu'il ne peut pas être ouvert ou utilisé avec Blocs V2. Veuillez donc sauvegarder vos projets avant de poursuivre la migration.
Le processus de migration
Lorsque vous ouvrez un Blocs Projet V2 dans Blocs V5, Blocs vous demandera si vous souhaitez migrer le projet vers Blocs V5. Il est important à ce stade de vous assurer d'avoir une sauvegarde de votre projet afin de pouvoir facilement revenir à Blocs 2 si votre migration nécessite beaucoup plus de travail que ce que vous aviez initialement prévu.
Quand Blocs migre un projet vers Bootstrap 4, il vérifie le HTML du projet pour les références aux anciennes classes Bootstrap 3 et analyse également la structure HTML en apportant des modifications si nécessaire. Il est important de se souvenir Blocs ne modifie aucune classe personnalisée, donc tout problème de style visuel causé par des classes personnalisées devra être modifié manuellement.
Différences visuelles naturelles
Il existe un certain nombre de facteurs qui feront que votre site aura une apparence différente Blocs V5 par rapport à Blocs V2. Les éléments suivants sont normaux et causés en raison de modifications clés apportées à l'infrastructure Bootstrap.
Le texte est plus grand
Après la migration, le changement le plus courant que vous remarquerez peut-être est que le texte peut paraître plus grand. En effet, Bootstrap 4 utilise désormais des tailles de police plus grandes dans tous ses styles de typographie de base. La référence ci-dessous illustre les différences entre les tailles de police de reclassement Bootstrap 3 et 4 pour les balises d'en-tête.
Bootstrap 3
H1 = 36 pixels
H2 = 30 pixels
H3 = 24 pixels
H4 = 18 pixels
H5 = 14 pixels
H6 = 12 pixels
Bootstrap 4
H1 = 2.5 rem
H2 = 2 rem
H3 = 1.75 rem
H4 = 1.5 rem
H5 = 1.25rem
H6 = 1rem
Basculer le style des symboles
Un autre problème visuel courant lors de la migration concerne les problèmes de style du symbole de bascule. En effet, dans Bootstrap 4, le symbole de bascule du navigateur est désormais une image SVG. Cela signifie qu'il n'est plus possible de personnaliser le symbole de bascule avec les anciennes sous-classes de Blocs V2. Pour changer la couleur du symbole de bascule dans Blocs V5 pour les arrière-plans clairs ou sombres, vous devrez définir la navigation parentale Brics style de thème.
Problèmes de cache
Lorsque vous migrez un projet vers Bootstrap 4 et que vous l'exportez, il est très probable que le cache du serveur rendra votre site défectueux une fois hébergé. Cela peut être facilement résolu en effaçant le cache d'un navigateur. Vous pouvez en savoir plus sur la résolution des problèmes de cache du navigateur ici.
Font Awesome
Dans Blocs V5, le jeu d'icônes Font Awesome a été mis à jour en V5. Blocs tentera de migrer toutes les anciennes classes d'icônes de Font Awesome V4 vers les nouvelles classes requises pour la V5. Cependant, si vous avez ajouté vos propres implémentations de code personnalisé des icônes Font Awesome, celles-ci devront être mises à jour manuellement.
Vous pouvez en savoir plus sur les classes qui ont changé dans Font Awesome V5 et comment migrer manuellement les classes ici.
Icônes de l'interface utilisateur carrousel, lightbox et défilement vers le haut
In Blocs V5 le carrousel, la boîte à lumière et le bouton de défilement vers le haut utilisent des icônes SVG plutôt que des polices d'icônes, cela signifie que les anciennes sous-classes qui étaient utilisées dans Blocs V3 pour définir la couleur des icônes ne fonctionnera plus. Il y a nouvelles sous-classes qui ciblent ces icônes SVG.
Veuillez noter que vous n'utiliserez plus la couleur de la police pour définir la couleur de l'icône, utilisez plutôt le Couleur de trait SVG contrôles de style dans l'éditeur de classes.
Fond parallaxe
Le fonctionnement de la parallaxe a changé Blocs V5, auparavant il utilisait cette technique qui applique la règle de classe background-attachment: fixed;. Cependant, cette approche a un inconvénient majeur qui est qu'elle ne fonctionne pas sur les appareils mobiles.
In Blocs V5, la parallaxe est maintenant alimentée par un Solution Javascript ce qui signifie qu'il fonctionne très bien sur à poser et mobile. Il y a quelques inconvénients à cette nouvelle méthode de parallaxe, le principal étant que les arrière-plans ne se répètent plus de manière transparente si vous avez un certain nombre de Blocs empilés avec la même image d'arrière-plan. Une solution de contournement consiste à déplacer simplement les lignes principales contenant le Bloc contenu de chaque individu Bloc et placez-les dans un seul Bloc avec l'effet de fond de parallaxe activé.
Si vous avez vraiment besoin d'obtenir le classique Blocs Effet de parallaxe V3 dans Blocs V5, vous guidera tout au long du processus de création manuelle.
Icône Menu
In Blocs V5, l'icône de menu bascule est maintenant un SVG en ligne. Cela signifie qu'il peut être facilement stylisé et personnalisé à l'aide de classes personnalisées. Cependant, si vous utilisiez auparavant un Bric comme Easy Burger pour personnaliser le menu de votre site Web, vous pouvez rencontrer des problèmes. Nous vous recommandons de reconstruire votre menu et de supprimer tout Brics qui manipulent le menu, si vous rencontrez des problèmes.
Marge
Blocs V5 n'a plus de contrôles de marge prédéfinis limités pour le texte et les images, à la place Blocs a un accès complet à la Utilitaires d'espacement bootstrap qui offrent une expérience beaucoup plus grande. Ceux-ci vous permettent d'appliquer une marge et un rembourrage prédéfinis pour n'importe quel bord sur n'importe quel élément. Cependant, lorsque vous utilisez l'espacement, vous pouvez constater que les contrôles ne prennent pas effet. Pour vider un élément, une marge ou un rembourrage, maintenez la touche Option enfoncée et cliquez sur le petit X sur le contrôle segmenté de bord pertinent que vous souhaitez effacer. Après cela, vous pouvez maintenant appliquer une nouvelle valeur de marge/remplissage à ce bord.
Couleurs
Blocs V5 dispose d'un système de couleurs entièrement nouveau avec de nombreux avantages. Cependant, en raison d'un changement aussi important, vous pouvez rencontrer des échantillons globaux qui peuvent ne pas fonctionner correctement dans Blocs V5, lorsque vous essayez de les affecter à un élément. Cliquez simplement avec le bouton droit sur l'échantillon problématique dans le gestionnaire d'échantillons et dupliquez-le, supprimez maintenant l'original et utilisez la version dupliquée.
N'oubliez pas, Blocs V5 est également livré avec un accès aux outils de développement WebKit en mode aperçu, il suffit de cliquer avec le bouton droit de la souris et d'inspecter pour y accéder. L'utilisation des outils de développement est un excellent moyen de savoir quelles classes personnalisées peuvent causer des problèmes de style indésirables sur votre site, ce qui accélère la résolution.
En utilisant Blocs V2 et V5 côte à côte
Il est possible de courir Blocs V2 et V5 sur le même système car ils utilisent tous deux des ressources de support d'application dédiées à la version. Cependant, les points suivants doivent être pris en considération.
- Les deux versions de Blocs partagent le même nom, cela signifie qu'il est impossible pour les deux applications d'occuper le même espace dans le dossier des applications MacOS. Pour éviter ce problème, renommez simplement le Blocs Application V2 de Blocs à Blocs V2. Cela permettra aux deux applications d'être placées dans le dossier des applications MacOS.
- Blocs V2 et V5 ont des types de fichiers différents. Cela signifie qu'une fois qu'un fichier est enregistré dans Blocs V5, il ne peut pas être ouvert dans Blocs V2. Dans cette optique, nous vous recommandons de conserver plusieurs copies de vos projets, afin d'éviter d'être contraint de les utiliser dans une version spécifique de Blocs.