移行する Blocs V2プロジェクトから Blocs V5

の最大の違いの XNUMX つ Blocs V5と比較して Blocs V2は事実です Blocs を使用して Web サイトを作成しなくなりました ブートストラップ3 代わりに、新しく改良されたものを使用します ブートストラップ4フレームワーク.

移行ツール

で作成されたプロジェクト Blocs V2 を使用 ブートストラップ3フレームワーク Bootstrap 3と4はまったく異なるため、これは明らかに理想的ではありません。 しかしながら、 Blocs V5 には、変換を支援するように設計された移行ツールが組み込まれています。 Blocs V2 プロジェクト (Bootstrap 3) を Blocs V5 プロジェクト (Bootstrap 4) は、可能な限りアップセットがありません。

移行する場合 Blocs V2 プロジェクト (Bootstrap 3) を Blocs V5 プロジェクト (Bootstrap 4) を使用すると、サイトのさまざまな側面にさらに注意が必要になる可能性があることに気付くことが保証されています。これは、この投稿全体で詳しく説明する多くの要因によるものです。

また覚えておいてください Blocs V2は一緒に実行できます Blocs V5なので、期限のある大規模なサイトやプロジェクトがある場合は、必要になる可能性のある大幅な手動変更を行う時間がない限り、これらの移行は避けてください。

移行プロセス

あなたが開くとき Blocs のV2プロジェクト Blocs V5、 Blocs プロジェクトをに移行するかどうかを尋ねられます Blocs V5。 この時点で、プロジェクトのバックアップがあることを確認して、簡単に元に戻せるようにすることが重要です。 Blocs 2移行に、当初の想定よりもはるかに多くの作業が必要な場合。

日時 Blocs プロジェクトをBootstrap4に移行し、プロジェクトのHTMLで古いBootstrap 3クラスへの参照をチェックし、必要に応じてHTML構造をスキャンして変更を加えます。 覚えておくことが重要です Blocs カスタムクラスは変更されないため、カスタムクラスによって引き起こされる視覚的なスタイルの問題は手動で修正する必要があります。

自然な視覚的な違い

あなたのサイトが異なって見える原因となるいくつかの要因があります Blocs V5と比較して Blocs V2。 以下は正常であり、Bootstrapフレームワークの主要な変更が原因で発生します。

テキストが大きい

移行後、気付く可能性のある最も一般的な変更は、テキストが大きく見える場合があることです。 これは、Bootstrap 4が、そのコアタイポグラフィスタイルのすべてでより大きなフォントサイズを使用するようになったためです。 以下のリファレンスは、見出しタグのBootstrap3と4のリグレードフォントサイズの違いを示しています。

ブートストラップ3

H1 = 36ピクセル
H2 = 30ピクセル
H3 = 24ピクセル
H4 = 18ピクセル
H5 = 14ピクセル
H6 = 12ピクセル

ブートストラップ4

H1 = 2.5レム
H2 = 2レム
H3 = 1.75レム
H4 = 1.5レム
H5 = 1.25レム
H6 = 1レム

シンボルスタイリングの切り替え

移行時のもう4つの一般的な視覚的な問題は、トグルシンボルのスタイルに関する問題です。 これは、Bootstrap XNUMXでは、ナビゲータートグルシンボルがSVGイメージになっているためです。 これは、からの古いサブクラスでトグルシンボルをカスタマイズすることができなくなったことを意味します Blocs V2。 でトグルシンボルの色を変更するには Blocs 明るい背景または暗い背景のV5では、親ナビゲーションを設定する必要があります Brics テーマスタイル。

キャッシュの問題

プロジェクトをBootstrap4に移行してエクスポートすると、サーバーキャッシュによって、ホストされたサイトが最初は壊れているように見える可能性が非常に高くなります。 これは、ブラウザのキャッシュをクリアすることで簡単に修正できます。 ブラウザのキャッシュの問題への対処について詳しく読むことができます こちら.

恐ろしいフォント

In Blocs V5、FontAwesomeアイコンセットがV5に更新されました。 Blocs 古いアイコンクラスをFontAwesomeV4からV5に必要な新しいクラスに移行しようとします。 ただし、Font Awesomeアイコンの独自のカスタムコード実装を追加した場合は、これらを手動で更新する必要があります。

Font Awesome V5で変更されたクラスと、クラスを手動で移行する方法について読むことができます こちら.

カルーセル、ライトボックス、スクロールしてトップのUIアイコン

In Blocs V5カルーセル、ライトボックス、および上部にスクロールボタンは、アイコンフォントではなくSVGアイコンを使用します。これは、で使用されていた古いサブクラスを意味します。 Blocs アイコンの色を設定するV3は機能しなくなります。 がある 新しいサブクラス これらのSVGアイコンを対象としています。
アイコンの色を設定するためにフォントの色を使用しなくなり、代わりに SVGストロークカラー クラスエディタのスタイリングコントロール。

視差の背景

視差の働き方が変わりました Blocs V5、以前使用していた この技術 クラスルールを適用します background-attachment: fixed;。 ただし、このアプローチにはXNUMXつの大きな欠点があります。それは、モバイルデバイスでは機能しないということです。

In Blocs V5、視差は現在、 Javascriptソリューション それはそれがうまく機能することを意味します デスクトップ と モバイル。 この新しい視差法にはいくつかの欠点があります。主な欠点は、多数の視差がある場合、背景がシームレスに繰り返されなくなることです。 Blocs 同じ背景画像と一緒に積み重ねられます。 この回避策は、を含むメイン行を単純に再配置することです。 Bloc 各個人のコンテンツ Bloc それらをXNUMXつに配置します Bloc 視差背景効果をオンにします。

あなたが本当に古典を手に入れる必要があるなら Blocs のV3視差効果 Blocs V5、 このガイド 手動で作成するプロセスを順を追って説明します。

メニューアイコン

In Blocs V5では、トグルメニューアイコンがインラインSVGになりました。つまり、カスタムクラスを使用して簡単にスタイル設定やカスタマイズができます。ただし、以前にEasy BurgerなどのカスタムBricを使用してWebサイトのメニューをカスタマイズしていた場合は、問題が発生する可能性があります。メニューを再度構築し、不要なものを削除することをお勧めします。 Brics 問題が発生した場合は、メニューを操作します。

マージン

Blocs V5 では、テキストと画像の事前設定されたマージン コントロールが制限されなくなりました。代わりに Blocs への完全なアクセス権を持っています ブートストラップ間隔ユーティリティ はるかに優れた体験を提供します。 これらを使用すると、任意の要素の任意のエッジに事前設定されたマージンとパディングを適用できます。 ただし、間隔を使用すると、コントロールが有効にならない場合があります。 要素、マージン、またはパディングをフラッシュするには、オプション キーを押したまま、クリアする関連するエッジ セグメント化されたコントロールの小さな X をクリックします。 この後、そのエッジに新しいマージン/パディング値を適用できるようになりました。

色

Blocs V5 には、多くの優れた利点を備えたまったく新しいカラー システムがあります。 ただし、このような大きな変更により、一部のグローバル スウォッチが正しく機能しない場合があります。 Blocs V5、それらを要素に割り当てようとしたとき。 Swatch Manager で問題のあるスウォッチを右クリックして複製し、オリジナルを削除して複製したバージョンを使用します。

使い方 Blocs V2 と V5 を並べて表示

実行することが可能です Blocs V2 と V5 は、どちらもバージョン専用のアプリケーション サポート リソースを使用するため、同じシステム上にあります。 ただし、以下の点を考慮する必要があります。

• の両方のバージョン Blocs 同じ名前を共有します。これは、両方のアプリがMacOSアプリケーションフォルダ内の同じスペースを占めることは不可能であることを意味します。 この問題を回避するには、名前を変更するだけです。 Blocs からの V2 アプリケーション Blocs 〜へ Blocs V2。 これにより、両方のアプリをMacOSアプリケーションフォルダーに配置できるようになります。
• Blocs V2 と V5 のファイル タイプは異なります。 これは、ファイルが保存されると、 Blocs V5では開けません Blocs V2. これを念頭に置いて、プロジェクトの複数のコピーを保持し、特定のバージョンの Blocs.