ブートストラップ5の新しいもの

人気のあるCSSフレームワークの最新のイテレーションである

Bootstrap 5は、多数の強化と改良を誇っています。 この記事では、Bootstrap 5の重要な変更、追加、および削除を掘り下げて、開発者のアップグレードまたは開始の包括的な概要を提供します。

重要な改善：

• jQueryの独立性：ブートストラップ5は、jQueryへの依存を排除​​し、Reactのような最新のJavaScriptフレームワークとの互換性を改善します。 Popper.jsは、動的な位置決めに使用されます
強化されたブラウザのサポート：
• インターネットエクスプローラーのサポートをドロップしながら、ブートストラップ5は、現在のブラウザーとのパフォーマンスと互換性を向上させるための最新のCSSカスタムプロパティとJavaScript APIをレバレッジします（Firefox 60、Chrome 60、Safari 12、Android Browserser /webView 6）。
data属性namespace：
• data属性は、で名前が付けられ、ブートストラップのjavascriptの動作を他のスクリプトから明確に区別します。 data-bs-*コンポーネントライブラリの拡張：
オフカンバスのサイドバーやフローティングフォームのような新しいコンポーネントは、インタラクティブでレスポンシブなレイアウトを作成するためのフレームワークの機能を強化します。
• 高度なカスタマイズ：更新されたSASS変数、​​ミキシン、およびCSSカスタムプロパティは、テーマとスタイリングの柔軟性を高めます。
• 合理化されたドキュメント：ドキュメントには、改善されたナビゲーション、詳細なカスタマイズガイド、ユーザビリティが向上した大幅なオーバーホールが行われました。
• ブートストラップを使用する（使用しない）時期：
ブートストラップは、特に初心者向けに、レスポンシブでモバイルファーストのWebサイトを構築するための非常に効果的なツールです。使いやすさ、事前に構築されたコンポーネント、および低学習曲線により、さまざまなプロジェクトに最適です。 ただし、その限界を認識することが重要です。 複雑なプロジェクトまたは最小限のファイルサイズを優先するプロジェクトの場合、代替フレームワークがより適している場合があります。 ブートストラップへの過度の依存は肥大化したマークアップにつながる可能性があるため、基礎となるWebテクノロジーのしっかりした理解が不可欠です。

ブートストラップ4からのアップグレード： Bootstrap 4からのアップグレードは、一般的に簡単です。 ほとんどのコンポーネントとクラスは残っていますが、開発者は削除されたコンポーネントのリストを慎重に確認し、それに応じて調整する必要があります。 主な焦点は、

属性を

に置き換え、非推奨コンポーネントまたは改名されたSASS変数に対処することです。

詳細な変更：

このセクションでは、最も影響力のある変更に焦点を当てて、コアの変更を要約しています。

• jQueryの削除：バニラJavaScriptへのシフトにより、フレームワークのサイズが大幅に削減され、パフォーマンスが向上します。 既存のjQueryの使用法は引き続きサポートされていますが、data-bs-no-jquery="true"属性を使用して無効にすることができます。
• IEサポートがドロップされました：これにより、最新のCSSとJavaScript機能を最適化した使用が可能になります。
データ属性の名前変更：
• 名前空間は明瞭さを強化し、競合を防止します。 バグの修正：data-bs-*ブートストラップ4に存在する多数のバグが解決されました。
>
• 非推奨機能：

冗長性または陳腐化により、いくつかのコンポーネントとユーティリティクラスが削除されました。 これらには、IEサポート、特定のバッジとボタンのクラス、Jumbotron、石積みカードのレイアウト、および注文、メディア、およびテーブルに関連するいくつかのユーティリティクラスが含まれます（ただしません）。 これらの機能は、多くの場合、既存のユーティリティクラスを使用して複製できます。 新機能：

Bootstrap 5では、いくつかのエキサイティングな追加を紹介します：

レスポンシブフォントサイズ（RFS）：

デフォルトでは、RFSは異なる画面サイズで応答性を高めます。

左から右（RTL）サポート：
• フルRTLサポートが組み込まれ、ブートストラップがより幅広い言語やロケールに適しています。 new
Breakpoint：
• このブレークポイントは、特大の画面（≥1400px）に対応しています。 改善されたドキュメント：
再編成および強化されたドキュメントにより、ユーザーエクスペリエンスが大幅に向上します。
• 新しいコンポーネント：xxlアコーディオン、オフカンバス、フローティングラベルは注目すべき追加の1つです。
• 結論：
Bootstrap 5は、パフォーマンスの改善と機能の強化とカスタマイズオプションのバランスをとる、大きな前進を表しています。 一部の機能は削除されていますが、全体的なアップグレードは、最新のレスポンシブWebサイトを構築するためのより合理化され、効率的で多用途のフレームワークを提供します。
• よくある質問（FAQ）：

FAQSセクションは、ブートストラップ5に関する一般的な質問に対する簡潔な回答を提供します。ブートストラップ4、移行戦略、新機能、ユーティリティAPI機能、カラーパレット拡張、フォームコントロールアップデート、新しいSVGアイコンライブラリ、ドキュメントの改善、ブラウザの互換性、および開始。

以上がブートストラップ5の新しいものの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。