Bootstrap4からBootstrap5に移行します

Blocs Bootstrapフレームワークの複数のバージョンをサポートするようになり、プロジェクトを最新バージョンに簡単に移行するための追加の組み込み機能も含まれています。

移行する方法

プロジェクトをBootstrap5に移行するには、メインを開きます プロジェクト設定 設定して フレームワーク ブートストラップ5へのドロップダウン。移行プロセスが開始され、完了すると通知されます。

重要な変更

この Blocs 自動移行機能 コードのみを移行します それ Blocs が作成されている場合、を介してプロジェクトに追加されたカスタムコードは移行されません。 添付ファイル コードエディター または コードウィジェット。 問題に対処するために、公式に精通することをお勧めします Bootstrap5移行ドキュメント.

スタイリング

Bootstrap 5にはいくつかの小さな視覚スタイルの違いがありますが、最も顕著なのは、サイトのアクセシビリティを向上させるために、すべてのリンクにデフォルトで下線が引かれていることです。

Structure

すべてのnavbarにコンテナが含まれるようになりました。 これにより、間隔の要件が大幅に簡素化され、広範なCSSオーバーライドが不要になります。

Javascriptを

Bootstrap 5は、もはや必要とせず、使用しません お酒。 これは、デフォルトでは、JqueryがBootstrap5サイトに含まれていないことを意味します。 この変更により、プロジェクトに追加されたカスタムJavaScriptが破損する可能性があります。

エクスポート時に、 Blocs すべてのJavaScript添付ファイルをスキャンし、Jqueryへの明らかな参照がないか検査します。 参照が見つかった場合、 Blocs Jqueryがサイトに自動的に含まれます。

データ属性

すべてのJavaScript（モーダル、カルーセル、ツールチップなど）のデータ属性に名前空間が付けられ、Bootstrap機能をサードパーティと区別できるようになりました。 たとえば、Bootstrap5は データ bs トグル データ切り替え。 以下は、変更された最も一般的なデータ属性のリストです。以下を参照してください。 Bootstrap5移行ドキュメント 広範なリストについては。

• データ切り替え > データ bs トグル
• データ配置 > データ bs 配置
• データ-親 > データ BS 親
• データ-却下 > データ bs-dismiss
• データライド > データ bs ライド
• データスライド > データ bs スライド
• データスライド先 > データBSスライドへ

クラス

Bootstrap 5のクラス名にはいくつかの変更があります。以下は、変更された最も一般的なクラスのリストです。 を参照してください Bootstrap5移行ドキュメント 広範なリストについては。

フォーム

• カスタムコントロール > フォームチェック
• カスタムスイッチ > フォームスイッチ
• カスタム制御入力 > フォーム-チェック-入力
• カスタムコントロールラベル > フォームチェックラベル

レスポンシブ埋め込み

• 埋め込み対応 > 比
• 埋め込み-レスポンシブ-16by9 > 比率-16×9
• 埋め込み-レスポンシブ-4by3 > 比率-4×3
• 埋め込み-レスポンシブ-4by4 > 比率-4×4
• 埋め込み-レスポンシブ-9by16 > 比率-9×16

マージンとパディング

• 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 自動 > ms 自動
• mr-0 > me-0
• mr-1 > me-1
• mr-2 > me-2
• mr-3 > me-3
• mr-4 > me-4
• mr-5 > me-5
• ミスターオート > 私オート
• 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-オート > ps 自動
• PR-0 > PR-0
• PR-1 > pe-1
• PR-2 > pe-2
• PR-3 > pe-3
• PR-4 > pe-4
• PR-5 > pe-5
• プレオート > ピーオート

アラインメント

• フロート左 > フロートスタート
• フロート右 > フロートエンド
• テキスト-左 > テキスト開始
• テキスト-右 > テキスト終了

ポップオーバーとツールチップ

• 矢印 > ツールチップ-矢印
• 矢印 > ポップオーバー矢印

その他

• srのみ > 視覚的に隠された
• 雨どいなし > g-0
• ボタン-block > で-100