Home-theater-designers
Bootstrap 5には、Internet Explorer（IE）のサポートの廃止やjQueryの依存関係など、大きな変更が加えられています。 Twitterによって開発されたBootstrapは、世界で最も人気のあるCSSフレームワークです。オープンソースのユーザーインターフェイスフレームワークは、将来に向けて自らを位置付けることを検討しており、これにより、v5で画期的な変更が行われるようになりました。
IE用のBootstrapのドロップにより、これを行う最初のWeb開発ツールになりました。この動きは、Internet Explorerの市場シェアが減少し続けており、すべてのWebブラウザの3％未満を占めているためです。
Bootstrapにどのような改善が加えられ、それらがどのように影響するかを確認するために読んでください。
1.jQueryのサポート
BootstrapはjQueryライブラリを使用しなくなります。代わりに、開発チームはこの変更を行うためにJavaScriptライブラリを改善しました。 jQueryの依存関係は、Bootstrapでは必ずしも悪いことではありませんでした。
実際、jQueryの導入により、JavaScriptの使用方法が根本的に変わりました。これにより、JavaScriptでの書き込みタスクが簡素化され、それがなければ多くのコード行が必要になります。
関連している： jQueryで要素を作成する方法を学ぶ
これらすべてにもかかわらず、チームはそれを廃止することを決定しました。これには、ソースファイルが小さく、ページの読み込み時間が長くなるという利点があります。これは非常に必要な変更であり、Bootstrapがより未来に優しいスタイルを獲得することになるでしょう。
ソースファイルのサイズは85KBの縮小されたJavaScriptによって軽量化されました。これは、Googleがモバイルサイトのページ読み込み時間をランキング要素と見なしているため重要です。
Bootstrap 5ではjQueryを使用する必要がなくなりましたが、必要に応じて引き続き使用できます。すべてのJavaScriptプラグインが引き続き利用可能であることも注目に値します。
2.CSSカスタムプロパティ
Internet Explorerのサポートを終了することにより、カスタムCSSプロパティ（変数）を使用できます。 IEはカスタムプロパティをサポートしていません。これは、IEがWeb開発者を長い間妨げていた理由の1つにすぎません。
CSSカスタムプロパティにより、CSSはより柔軟でプログラム可能になります。 CSS変数の前には -bs サードパーティのCSSとの競合を防ぐため。
使用可能な変数には、ルート変数とコンポーネント変数の2種類があります。
ルート変数には、BootstrapCSSがロードされている場所ならどこからでもアクセスできます。これらの変数はにあります _root.scss ファイルであり、コンパイルされたdistファイルの一部です。
コンポーネント変数は、特定のコンポーネントのローカル変数として使用されます。これらは、ネストされたテーブルなどのコンポーネントでスタイルが誤って継承されるのを防ぐのに役立ちます。
3.改善されたグリッドシステム
バージョン3から4へのアップグレードでいくつかの問題が発生したため、今回はBootstrap 5がシステムの大部分を保持し、完全に変更するのではなく、既存のシステムに基づいて構築します。変更点のいくつかは次のとおりです。
- 側溝クラス（ .boys ）はユーティリティに置き換えられました（ 。NS* ）マージンとパディングによく似ています
- 垂直間隔クラスも含まれています
- 列のデフォルトはなくなりました 位置：相対
4.改善されたドキュメント
特にカスタマイズに関しては、ドキュメントがより多くの情報で強化されています。一般的な問題は、Bootstrapを使用している多くのサイトで、Bootstrapを使用していることをすぐに識別できることでした。 Bootstrap 5には、新しいルックアンドフィールとより優れたカスタマイズが付属しています。
すべてのサイトやアプリが同じ類似性を持つとは限らないように、テーマをカスタマイズする柔軟性が向上しました。 v4テーマページは、実際には、Sass（人気のあるCSSプリプロセッサ）ファイルの上に構築するためのより多くのコンテンツとコードスニペットで拡張されています。テンプレートリポジトリとして利用できるGitHubプラットフォームでスターターnpmプロジェクトを見つけることもできます。
カラーパレットもバージョン5で拡張されました。拡張された組み込みのカラーシステムは、コードベースを離れることなく、カラーリングを簡単にスタイリングできることを意味します。 Bootstrapカラードキュメントにカラーコントラストメトリックを追加するなど、カラーコントラストを改善するための作業も増えています。
5.フォームコントロールの改善
Bootstrapは、フォームコントロール、入力グループなどを改善しました。
v4では、Bootstrapは、各ブラウザーによって提供されるデフォルトに加えて、カスタムフォームコントロールを使用していました。 v5では、これらはすべてカスタマイズされています。すべてのラジオボタン、チェックボックス、ファイル、範囲などを使用して、さまざまなブラウザで同じ外観と動作を実現します。
新しいフォームコントロールには、不要なカラフルなマークアップが含まれなくなりましたが、代わりに標準および論理的なデザイン機能に重点が置かれています。
6. Bootstrap5はUtilitiesAPIを追加します
Tailwind CSSなどの新しいCSSライブラリに続いて、Bootstrapはユーティリティライブラリも追加しています。ブートストラップチームは、過去10年以上にわたって、他の開発者がWeb上で構築した方法にどのように挑戦しているかを見て喜んでいると述べています。
公益事業は開発コミュニティで勢いを増しており、ブートストラップチームは注目しています。チームは以前、グローバルを使用してv4でユーティリティのプロビジョニングを追加していました $ enable- * クラス。 v5では、APIアプローチに変更され、Sassの新しい言語と構文になりました。これにより、指定されたデフォルトを削除または変更しながら、新しいユーティリティを作成することができます。
より良い編成を提供する方法として、v4にあったいくつかのユーティリティがヘルパーセクションに移動されました。
7.新しいブートストラップアイコンライブラリ
Bootstrapは現在、1,300を超えるアイコンを備えた独自のオープンソースSVGアイコンライブラリを誇っています。フレームワークのコンポーネント用にカスタムメイドされていますが、どのプロジェクトでもそれらを使用できます。
それらがSVG画像であることを考えると、それらは迅速にスケーリングでき、さまざまな方法で実装でき、CSSでスタイルを設定することもできます。
あなたはを使用してアイコンをインストールすることができます 海抜：
$ npm i bootstrap-iconsBootstrap5をインストールします
あなたは行くことができます Bootstrap5の公式ダウンロードページ あなたがそれをインストールしたい場合。最新の開発リリースに遅れないようにしたい場合は、次を使用できます。 海抜 それを引っ張る：
$ npm i bootstrap@next
この記事の執筆時点では、フレームワークはベータ3バージョンです。これは、ソフトウェアが安全に使用できるが、まだ開発中であることを意味します。チームにフィードバックを提供し、必要な貢献をしてください。
共有 共有 つぶやき Eメール Webコンポーネントとコンポーネントベースのアーキテクチャの概要一般的なWebコンポーネントを見て、それらがなぜ役立つのかを見てみましょう。
次を読む 関連トピック- プログラミング
- ウェブ開発
- JavaScript
- CSS
ジェロームはMakeUseOfのスタッフライターです。彼はプログラミングとLinuxに関する記事をカバーしています。彼は暗号愛好家でもあり、常に暗号業界を監視しています。
ジェローム・デビッドソンのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
rokutvでnetflixからログアウトする方法購読するにはここをクリックしてください