ブートストラップ3とブートストラップ4–概要

Bootstrapは、応答性の高いモバイルファーストのWebサイトを開発するために、最も信頼されているオープンソースのフロントエンドフレームワークです。 ブートストラップは有名なフレームワークです、なぜですか？ 必要なのはHTMLとCSSの基本的な知識だけであり、さまざまなデバイスでの応答性を処理する事前定義されたクラスのブートストラップを使用して、魅力的で機能的なWebサイトを構築できます。

Bootstrap 3は2013年にリリースされ、最後の安定バージョンBootstrap 3.3.7は2016年7月にリリースされました。2014年10月、TwitterはBootstrap4が開発中であることを発表しました。 Bootstrap 4の最初のアルファバージョンは2015年8月にリリースされました。そして今、2017年8月に、Bootstrap4.0.0-ベータバージョンがリリースされました。 0から学習を開始したい場合は、この詳細なBootstrapチュートリアルを確認できます。

この投稿の注目の的は、バージョン3から新しくリリースされたバージョン4.0.0-betaへの主な違い、追加、および削除です。

バージョン4の違い：

これで、Bootstrap 4の新機能について話し始めることができます。テクノロジーが急速に進化するにつれて、クリーンで高速なWebサイトの構築をはるかに簡単にするために、より新しくよりスマートな言語が開発されています。 これは、Bootstrapの最新リリースの場合です。 チームは、この「バージョン4は、プロジェクトのほぼ全体を大幅に書き直したものです」と述べています。 この改善されたいくつかの重要な変更を要約します。

地球規模の変化：

• ソースCSSファイルのLessからSassに切り替えました。
• remのプライマリCSSユニットとしてpxから切り替えられましたが、デバイスのビューポートはタイプサイズの影響を受けないため、ピクセルはメディアクエリとグリッドの動作に引き続き使用されます。
• グローバルフォントサイズが14pxから16pxに増加しました。
• 〜480px以下の新しいグリッド層を追加しました。

グリッドシステム：

Bootstrap 4の改善に向けた主なステップは、Flexboxの採用に向けた動きです。 フレックスボックスの一部として、垂直および水平方向の配置クラスのサポートが含まれています。 Bootstrap 4は、カスタマイズに重点を置いています。 これは新しいグリッド層システムであり、Bootstrap 4は最大5つのグリッド層の存在を楽しむことができます（5層の例：.col-4、.col-sm-4、.col-md-4、.col-lg-4、 .col-xl-4）。 Bootstrap 4は、改善されたグリッドシステムへのアクセスを提供すると簡単に言うことができます。

• よりきめ細かい制御のために、768pxより下に新しいsmグリッド層を追加しました。 xs、sm、md、lg、およびxlがあります。 これは、すべての層が1レベル上に上がったことも意味します（したがって、v3の.col-md-6はv4の.col-lg-6になります）。
• グリッドシステムのメディアクエリブレークポイントとコンテナの幅を変更して、新しいグリッドティアを考慮し、列が最大幅で12で均等に割り切れるようにしました。
• グリッドブレークポイントとコンテナ幅は、少数の個別の変数ではなく、Sassマップ（$grid-breakpointsと$container-max-widths）を介して処理されるようになりました。 これらは@screen-*変数を完全に置き換え、グリッド層を完全にカスタマイズできるようにします。
• メディアクエリも変更されました。 毎回同じ値でメディアクエリ宣言を繰り返す代わりに、@ include media-breakpoint-up / down/onlyがあります。 これで、@ media（min-width：@ screen-sm-min）{…}と書く代わりに、@ include media-breakpoint-up（sm）{…}と書くことができます。

ブラウザのサポート：

• IE8とiOS6のサポートを終了しました。 v4はIE9+とiOS7+のみになりました。 これらのいずれかが必要なサイトには、v3を使用してください。

ユーティリティクラス：

Bootstrap 4には、既存の機能をまったく妨げることなく、新しいユーティリティクラスが含まれています。 このような重要な追加は、レスポンシブテキスト配置クラス、レスポンシブフロート、レスポンシブ埋め込みなどです。 多くのショートカットを提供する以外に、これらはそれぞれ、テキストの配置、要素のフローティング、および埋め込みメディアのアスペクト比のスケーリングを変更することを可能にします。 （例： .hidden-md-upは、中、大、および特大のビューポートで要素を非表示にします。現在、 .hidden-md-up代わりに.d-md-noneを使用します）。

画像：

• .img-fluid .img-responsiveして.imgに名前が変更されました。
• .img-roundedから.roundedに名前が変更されました
• .img-circle名前を.rounded-circleに変更しました

テーブル：

• レスポンシブテーブルは、ラッピング要素を必要としなくなりました。 簡単に言うと、 Bootstrap 3では、 .table-responsiveクラスを親<div>に追加する必要があります。 ただし、Bootstrap 4では、 .table-responsiveクラスが<table>要素に追加されます。
• 新しい.table-inverseオプションが追加されました。
• テーブルヘッダー修飾子を追加しました： .thead-defaultおよび。 .thead-inverse
• コンテキストクラスの名前を.table- prefixを持つように変更しました。 したがって、 .active .success 、 .warning 、 .danger 、および.table-infoから.table-active 、 .table-success 、 .table-warning 、 .table-danger 、および.table-info.

ナビゲーション：

Bootstrap 4では、ナビゲーションコンポーネントが大幅に簡素化されています。 最新のnav基本クラスを使用して要素の新しいリストを作成する必要があります。 nav-linkクラス、nav-itemクラス、ナビゲーションバースタイルなどの最近の追加もあります。

• フレックスボックスでコンポーネントを書き直しました。
• .navbar-defaultは.navbar-lightになりましたが、 .navbar-darkは同じままです。 ただし、これらのクラスはbackground-colorを設定しなくなりました。 代わりに、それらは本質的にcolorにのみ影響します。
• .navbar-toggleは.navbar-togglerになり、さまざまなスタイルと内部マークアップがあります（3つ以上の<span>はありません）。
• .navbar-formクラスを完全に削除しました。 もう必要ありません。 代わりに、 .form-inlineを使用し、必要に応じてマージンユーティリティを適用してください。
• Navbarには、デフォルトmargin-bottomまたはborder-radiusが含まれなくなりました。

ブートストラップバージョン3とバージョン4の比較表

すでに述べたように、Bootstrapチームはフレームワークを書き直しました。 したがって、上記の変更は、ここで記述した重要な変更にすぎません。 詳細を読むには、リンクBootstrap4をたどってください。

Bootstrap 4に移行するか、Bootstrap3のままにする必要があります

Bootstrap4が提供する機能について説明しました。 フレームワーク全体で不要な要素やクラスを最適化およびクリーンアップするために多くの作業が行われていることがわかります。 Bootstrap 4は、モバイル対応の優れたWebサイトを作成する際に、はるかに高速で合理化され、柔軟性と使いやすさがさらに向上することを約束します。

ブートストラップ4、フレックスボックスに移動しました。 これは、最大かつ重要な成果の1つと見なすことができます。 これにより、次の利点が得られます。

• Flexboxベースのグリッド
• 新しいXLlグリッド層
• 最新の自動レイアウトグリッド
• Navbarのカスタマイズオプション
• 新しいスペーシングユーティリティ
• Sans Glyphicons構成（ブロートフリーゾーン）
• レスポンシブサイジング
• レスポンシブフロート
• 自動マージン
• 垂直方向のセンタリング

結論

Bootstrapは常に開発者の生活を楽にしてきましたが、バージョンの更新により、bootstrapにはさらに多くの新機能とオプションが追加され、開発者にとってさらに簡単になりました。そのため、人々はBootstrap3からBootstrapに移行しています。 4以前の対応物よりも便利でアクセスしやすいため。