Bootstrap 4の新機能とクール機能
Bootstrapフレームワークの次のメジャーリリースはもうすぐです。アルファ版はすでにBootstrapの開発Webサイトからダウンロードでき、ソースコードもGithubから入手できます。.
Twitter Bootstrapは現在最も人気のあるフロントエンドフレームワークです。それは開発者を可能にします モバイル優先のレスポンシブWebサイトを迅速に構築する. ブートストラップを使用すると、標準のHTML 5、CSS 3、およびJavaScriptフロントエンドトリオを賢く利用することができます。現在、Web上の600万以上のサイトで利用されています。.
Bootstrap 4はまだ開発段階にあります（まだライブサイトでは使用しないでください）が、開発者は素晴らしい仕事をしました。この記事では、きっと多くの優れた機能を含む新しいバージョンを見ていきます。 フロントエンド開発ワークフローの合理化と改善.
1. LESSの代わりにSass
これまで、BootstrapはLESSをメインのCSSプリプロセッサとして使用していましたが、新しいメジャーリリースでは、スタイルルールはSassにリファクタリングされ、フロントエンド開発者の間で人気が高まります。可能性C / Cで書かれた強力なLibsass Sass Complierのおかげで++ ブートストラップ4ははるかに速くコンパイルされます 前より.
2.小型スクリーン用の新しいグリッド層
Bootstrapは洗練されたレスポンシブグリッドシステムを備えているため、開発者はさまざまなビューポートを持つデバイスをターゲットにすることができます。ブートストラップ3には現在、列用に4つのグリッドクラスがあります。, .col-xs-XX 携帯電話用, .col-sm-XX タブレット用, .col-md-XX デスクトップ用 .col-lg-XX 大規模デスクトップ用。 Bootstrap 4はグリッドシステムを強化し、5番目のものは開発者に次のことを容易にします。 ビューポート幅が480px未満の小型デバイスをターゲット.
新しいグリッドクラスは、前の最小クラスの名前を使用し、現在のグリッド層の名前を1つ上のノッチだけ押し上げました。 Bootstrap 4では、大規模デスクトップでは .col-xl-XX クラスセレクタ新しい名前であるにもかかわらず、彼らが特別に大きいスクリーンのために新たなクラスを追加するのではなく特別に小さいもののために追加することを知っておくことは重要です.
3.相対CSS単位を紹介します
Bootstrap 4はついにInternet Explorer 8のサポートを終了します。それは彼らが厄介なpolyfillsを取り除き、そして相対的なCSS単位に変換することを可能にするのでそれは本当にスマートなステップです。ピクセルの代わりに、新しいメジャーリリースは REMとEMを使用する それを可能にする レスポンシブタイポグラフィを実装する ブートストラップサイトで。これにより、読みやすさも向上し、障害のあるユーザーがサイトにアクセスしやすくなります。.
相対ユニットが新しいBootstrap 4でどのように機能するか試してみたい場合は、Codepenでこのデモをチェックしてください。.
4.真新しいブートストラップカード
開発チームは、Bootstrapのユーザーインターフェイスの以前の要素をいくつか統合することにしました。 Cardsという新しいUIコンポーネント. カードは、以前のウェル、サムネイル、およびパネルに代わるものとなり、より合理化されたワークフローをユーザーに提供します。カードはタイトル、ヘッダー、ウェルのフッター、サムネイル、パネルなどの身近な要素を保持しています。.
カードは現在のUIコンポーネントよりも柔軟性があるため、クリエイティブな実装用のスペースが広くなります。すでにBootstrap Cardsを使ってCodepenの実験を行っているパイオニアがいます。あなたはそれらをチェックアウトするか、あなた自身のカードを作ることができます.
5.新しい再起動モジュール
新しいRebootモジュールは以前のものを置き換えます normalize.css ファイルをリセットします。それは捨てません。それどころか、それはそれの上により多くの規則を構築します。この移動の目的は、すべての汎用CSSセレクターを含めてスタイルをリセットすることでした。 単一の使いやすいSCSSファイル. 新しいモジュールがどのように機能するのかをよりよく理解したい場合は、ここでソースコードを見てください。.
新しいリセットスタイルでボックスサイズのCSSプロパティがスマートに設定されていることを知っておくと便利です。 ボーダーボックス に したがって、ページ上の各子要素によって継承されます。新しいスタイルルール レスポンシブレイアウトをより管理しやすくする. content-boxとborder-boxのレイアウトタイプの違いを体験したい場合は、CSS-Tricks.comが提供するこの便利なデモを見てください（Bootstrap 4用に作成されたのではなく、ボックスサイズの大きさを示しているだけです）一般的に動作します）.
6.オプトインFlexboxのサポート
Bootstrap 4はCSS 3のFlexbox Layoutを利用することを可能にします - Internet Explorer 9はflexboxモジュールをサポートしていないので - Bootstrap 4のデフォルトバージョン 流動的なレイアウトを実装するためにfloatおよびdisplay CSSプロパティを利用する.
Flexboxは、利用可能なスペースを最大限に埋めるために伸縮する柔軟なコンテナを提供するため、レスポンシブデザインで優れた活用が可能な使いやすいレイアウトを備えています。以下の場合にのみオプトインフレックスボックス機能を使用してください。 しない IE9のサポートを提供する必要がある.
7.合理化された変数のカスタマイズ
新しいBootstrapリリースで使用されるすべてのSass変数は_variables.scssという名前の単一ファイルに含まれているため、開発プロセスが大幅に合理化されます。このファイルの設定を別の名前のファイルにコピーする以外は、何もする必要はありません。 _custom.scss デフォルト値を変更する.
あなたはできる 多くのものをカスタマイズする 色、間隔、リンクスタイル、タイポグラフィ、テーブル、グリッドのブレークポイントとコンテナ、列番号とガター幅、その他多数.
8.スペースのための新しいユーティリティクラス
Bootstrap 3には、フローティングやclearfixを変更するものなど、すでに実用的なユーティリティクラスが多数ありますが、Bootstrap 4にはさらに多くの機能が追加されています。の 新しい間隔クラス 開発者が自分のサイトの余白と余白をすばやく変更できるようにする.
新しいクラスの構文は非常に簡単です。例えば、 .m-a-0クラス スタイルルールをリンクします。 与えられた要素のすべての辺のマージンを0に設定します（margin-all-0）。. マージンは メートル- プレフィックス、パディングは p- 接頭辞。開発ドキュメントでは、すべての新しいスペーシングユーティリティクラスを見ることができます。.
テザーを搭載したツールチップとポップオーバー
Bootstrap 4のツールチップとポップオーバーでは、supercool Tetherライブラリを使用しています。これは、絶対位置の要素を同じページの別の要素のすぐ隣に配置できるようにする位置決めエンジンです。これはツールチップとポップオーバーを意味します 自動的に正しく配置されます Bootstrap 4 Webサイト.
TetherはサードパーティのJavaScriptライブラリであるため、bootstrap.jsファイルの前に別途HTMLに含める必要があることを忘れないでください。.
10.リファクタリングされたJavaScriptプラグイン
開発チームは、EcmaScript 6を使用して、各JavaScriptプラグインを新しいリリース用にリファクタリングしました。最新の仕様を賢く活用し、最新の機能拡張を適用して、フロントエンドのエクスペリエンスを向上させます.
新しいBootstrap 4も、次のような他のJavaScriptの改良を受けています。 オプションタイプの確認, 一般的な分解方法, そして UMDのサポート, これは、最も人気のあるフロントエンドフレームワークがこれまで以上にスムーズに動作するように、すべて一緒に機能します。.
今読む：ブートストラップ＆財団への10の軽量の選択肢
