Einer der größten Unterschiede bzgl Blocs V5 im Vergleich zu Blocs V2 ist die Tatsache Blocs erstellt keine Websites mehr mit Bootstrap 3 und nutzt stattdessen das neue und verbesserte Bootstrap 4-Framework.
Migrationswerkzeug
Projekte erstellt in Blocs V2 verwenden die Bootstrap 3-Framework Das ist natürlich nicht ideal, da Bootstrap 3 und 4 sehr unterschiedlich sind. Jedoch, Blocs V5 wird mit einem integrierten Migrationstool geliefert, das die Konvertierung unterstützen soll Blocs V2-Projekte (Bootstrap 3) in Blocs V5-Projekte (Bootstrap 4) mit so wenig Aufregung wie möglich.
Bei der Migration eines Blocs V2-Projekt (Bootstrap 3) zu a Blocs V5-Projekt (Bootstrap 4) werden Sie garantiert feststellen, dass verschiedene Aspekte Ihrer Website möglicherweise weiterer Aufmerksamkeit bedürfen. Dies liegt an einer Reihe von Faktoren, auf die wir in diesem Beitrag näher eingehen werden.
Denken Sie auch daran Blocs V2 kann daneben laufen Blocs V5 Wenn Sie also große Websites oder Projekte mit Fristen haben, vermeiden Sie die Migration dieser Websites, es sei denn, Sie haben die Zeit, wesentliche manuelle Änderungen vorzunehmen, die möglicherweise erforderlich sind.
Das Wichtigste, an das Sie sich erinnern sollten, bevor Sie ein Projekt von migrieren Blocs V2 bis Blocs V5 soll es sichern. Sobald ein Projekt migriert und gespeichert wurde, kann es nicht mehr rückgängig gemacht werden, d. h. es kann nicht mehr geöffnet oder verwendet werden Blocs V2. Sichern Sie daher Ihre Projekte, bevor Sie mit der Migration fortfahren.
Der Migrationsprozess
Wenn Sie eine öffnen Blocs V2-Projekt in Blocs V5, Blocs Sie werden gefragt, ob Sie das Projekt auf migrieren möchten Blocs V5. An dieser Stelle ist es wichtig sicherzustellen, dass Sie eine Sicherungskopie Ihres Projekts haben, damit Sie problemlos darauf zurückgreifen können Blocs 2 wenn Ihre Migration viel mehr Arbeit erfordert, als Sie ursprünglich vorgesehen hatten.
Wann Blocs migriert ein Projekt nach Bootstrap 4, überprüft den HTML-Code des Projekts auf Verweise auf alte Bootstrap 3-Klassen und durchsucht bei Bedarf die HTML-Struktur, um Änderungen vorzunehmen. Es ist wichtig, sich zu erinnern Blocs Ändert keine benutzerdefinierten Klassen, daher müssen visuelle Stilprobleme, die durch benutzerdefinierte Klassen verursacht werden, manuell geändert werden.
Natürliche visuelle Unterschiede
Es gibt eine Reihe von Faktoren, die dazu führen, dass Ihre Website anders aussieht Blocs V5 im Vergleich zu Blocs V2. Die folgenden Punkte sind normal und werden aufgrund von Schlüsseländerungen am Bootstrap-Framework verursacht.
Text ist größer
Nach der Migration ist die häufigste Änderung, die Sie möglicherweise bemerken, dass der Text möglicherweise größer aussieht. Dies liegt daran, dass Bootstrap 4 jetzt größere Schriftgrößen für das gesamte Kerntypografie-Styling verwendet. Die folgende Referenz zeigt die Unterschiede zwischen Bootstrap 3 und 4, wobei die Schriftgrößen für die Überschriften-Tags neu bewertet werden.
Bootstrap 3
H1 = 36px
H2 = 30px
H3 = 24px
H4 = 18px
H5 = 14px
H6 = 12px
Bootstrap 4
H1 = 2.5 rem
H2 = 2 rem
H3 = 1.75 rem
H4 = 1.5 rem
H5 = 1.25rem
H6 = 1rem
Symbol-Styling umschalten
Ein weiteres häufiges visuelles Problem bei der Migration sind Probleme beim Umschalten des Symbols. Dies liegt daran, dass in Bootstrap 4 das Navigator-Umschaltsymbol jetzt ein SVG-Bild ist. Dies bedeutet, dass es nicht mehr möglich ist, das Umschalt-Symbol mit alten Unterklassen von anzupassen Blocs V2. So ändern Sie die Farbe des Umschaltersymbols in Blocs V5 für helle oder dunkle Hintergründe müssen Sie die übergeordnete Navigation einstellen Brics Themenstil.
Cache-Probleme
Wenn Sie ein Projekt auf Bootstrap 4 migrieren und exportieren, ist es sehr wahrscheinlich, dass der Server-Cache dazu führt, dass Ihre Site nach dem Hosting zunächst fehlerhaft aussieht. Dies kann leicht behoben werden, indem der Cache eines Browsers geleert wird. Weitere Informationen zum Beheben von Problemen mit dem Browser-Cache finden Sie hier hier.
Font Ehrfürchtig
In Blocs In V5 wurde das Icon-Set "Font Awesome" auf V5 aktualisiert. Blocs wird versuchen, alte Symbolklassen von Font Awesome V4 auf die neuen Klassen zu migrieren, die für V5 erforderlich sind. Wenn Sie jedoch Ihre eigenen benutzerdefinierten Code-Implementierungen der Font Awesome-Symbole hinzugefügt haben, müssen diese manuell aktualisiert werden.
Sie können nachlesen, welche Klassen in Font Awesome V5 geändert wurden und wie die Klassen manuell migriert werden hier.
Karussell-, Leuchtkasten- und Bildlaufsymbole
In Blocs V5 Karussell, Leuchtkasten und Bildlauf nach oben verwenden SVG-Symbole anstelle von Symbolschriftarten. Dies bedeutet, dass die alten Unterklassen verwendet wurden Blocs V3 zum Einstellen der Farbe der Symbole funktioniert nicht mehr. Es gibt neue Unterklassen die auf diese SVG-Symbole abzielen.
Bitte beachten Sie, dass Sie nicht mehr die Schriftfarbe verwenden, um die Symbolfarbe festzulegen, sondern stattdessen die SVG Strichfarbe Styling-Steuerelemente im Klasseneditor.
Parallaxenhintergrund
Die Funktionsweise der Parallaxe hat sich geändert Blocs V5, vorher verwendet diese Technik welches die Klassenregel anwendet background-attachment: fixed;. Dieser Ansatz hat jedoch einen großen Nachteil: Er funktioniert nicht auf Mobilgeräten.
In Blocs V5, Parallaxe wird jetzt von einem angetrieben Javascript-Lösung was bedeutet, dass es großartig funktioniert Desktop und Mobile. Diese neue Parallaxenmethode hat einige Nachteile. Der Hauptgrund ist, dass sich Hintergründe nicht mehr nahtlos wiederholen, wenn Sie mehrere haben Blocs zusammen mit dem gleichen Hintergrundbild gestapelt. Eine Problemumgehung besteht darin, einfach die Hauptzeilen zu verschieben, die das enthalten Bloc Inhalte von jedem Einzelnen Bloc und legen Sie sie in eine einzige Bloc mit eingeschaltetem Parallaxen-Hintergrundeffekt.
Wenn Sie wirklich den Klassiker brauchen Blocs V3 Parallaxeeffekt in Blocs V5, dem Leitfaden führt Sie durch den Prozess der manuellen Erstellung.
Menu Icon
In Blocs V5 ist das Umschaltmenüsymbol jetzt ein Inline-SVG. Dies bedeutet, dass es mit benutzerdefinierten Klassen einfach gestaltet und angepasst werden kann. Wenn Sie jedoch zuvor eine benutzerdefinierte verwendet haben Bric wie Easy Burger zum Anpassen des Menüs Ihrer Website, können Sie einige Probleme feststellen. Wir empfehlen, Ihr Menü erneut zu erstellen und alle zu entfernen Brics die das Menü manipulieren, wenn Sie auf Probleme stoßen.
Marge
Blocs V5 verfügt stattdessen nicht mehr über begrenzte voreingestellte Randsteuerungen für Text und Bilder Blocs hat vollen Zugriff auf die Bootstrap-Spacing-Dienstprogramme die ein viel größeres Erlebnis bieten. Diese ermöglichen es Ihnen, einen voreingestellten Rand und Polsterung für jede Kante auf jedem Element anzuwenden. Wenn Sie jedoch Abstände verwenden, stellen Sie möglicherweise fest, dass die Steuerelemente nicht wirksam werden. Um ein Element, einen Rand oder eine Auffüllung zu leeren, halten Sie die Optionstaste gedrückt und klicken Sie auf das kleine X auf dem relevanten kantensegmentierten Steuerelement, das Sie löschen möchten. Danach können Sie nun einen neuen Rand-/Auffüllwert auf diese Kante anwenden.
Farben
Blocs V5 hat ein völlig neues Farbsystem mit vielen großartigen Vorteilen. Aufgrund einer so großen Änderung kann es jedoch vorkommen, dass Sie auf einige globale Farbfelder stoßen, die möglicherweise nicht richtig funktionieren Blocs V5, wenn Sie versuchen, sie einem Element zuzuweisen. Klicken Sie einfach mit der rechten Maustaste auf das problematische Farbfeld im Farbfeld-Manager und duplizieren Sie es, entfernen Sie jetzt das Original und verwenden Sie die duplizierte Version.
Vergiss nicht, Blocs V5 bietet auch Zugriff auf die WebKit-Entwicklertools im Vorschaumodus. Klicken Sie einfach mit der rechten Maustaste und überprüfen Sie sie, um darauf zuzugreifen. Die Verwendung der Entwicklertools ist eine hervorragende Möglichkeit, um herauszufinden, welche benutzerdefinierten Klassen unerwünschte Stilprobleme auf Ihrer Website verursachen können, wodurch die Behebung beschleunigt wird.
Die richtigen Blocs V2 und V5 nebeneinander
Es ist möglich zu rennen Blocs V2 und V5 auf demselben System, da beide Versions-dedizierte Anwendungssupportressourcen verwenden. Folgende Punkte sollten jedoch berücksichtigt werden.
- Beide Versionen von Blocs Wenn Sie denselben Namen verwenden, können beide Apps nicht denselben Speicherplatz im MacOS-Anwendungsordner belegen. Um dieses Problem zu vermeiden, benennen Sie einfach das um Blocs V2-Anwendung von Blocs zu Blocs V2. Dadurch können beide Apps im MacOS-Anwendungsordner abgelegt werden.
- Blocs V2 und V5 haben unterschiedliche Dateitypen. Das heißt, sobald eine Datei gespeichert wird Blocs V5 kann es nicht geöffnet werden Blocs V2. Vor diesem Hintergrund empfehlen wir Ihnen, mehrere Kopien Ihrer Projekte aufzubewahren, um nicht gezwungen zu sein, sie in einer bestimmten Version von zu verwenden Blocs.