ついに来た!Bootstrap4ドキュメントを見た感想

ついにでましたね。バージョン4!Bootstrap4 アルファ版
今現在はアルファ版なのでもう少し変わるかと思いますが3との比較をしてみます。個人的にはだいぶ改善されていてとても良い感じだと思います。
3からの移行は2の時に比べるとだいぶスムーズに出来そうです。追加した機能や無くなった機能もありますが全体的には満足できる内容です。今後は4をメインに使っていこうと考えてます。3と比べてみました。以下感想と翻訳です。


スポンサーリンク

イントロダクション

イントロ部分では下記のように書かれています。すべてgoogle翻訳で訳していますので変なところもありますがご了承くださいませ。

ブートストラップはモバイルファーストのサイトやアプリケーションを構築するための、世界で最も人気の高いレスポンシブCSSフレームワークです。
あなたが高品質のHTMLを見つけるの内部では、CSS、およびJavaScriptはこれまで以上に簡単任意のプロジェクトを開始するようにします。
ここですぐにブートストラップCDNとテンプレートスターターページを開始する方法です。

良いですね。上記の文章から始まっています。

クイックスタート

すぐにプロジェクトにブートストラップを追加するために探しですか?
MaxCDNで無料で提供ブートストラップCDNを使用します。パッケージマネージャを使用したり、ソースファイルをダウンロードする必要がありますか?
CSSをロードするために、他のすべてのスタイルシートの前に、<head>の中にスタイルシートの<link>コピー&ペーストします。

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">

右の終了</body>タグの前に、ページの終わり近くにJavaScriptのプラグインとjQueryを追加します。コードがそれに依存する最初のjQueryを配置してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

これがブートストラップサイトを構築する方法です。一般的なページ構造が不明であれば、例のページテンプレートの読み込みます。そして、それはたったこれだけでできます。

bs4a1
クイックスタートの読み込みを見ましたところtheme.cssなのがなくなっているので一つになった模様ですね。グラデーションかかったテーマファイルがなくなっているようです。

Box-sizing

CSSのより簡単なサイジングのために、ボックスコンテンツ・ボックスからグローバルボックスのサイズ変更値を切り替えます。これは確実にパディング要素の最終的な計算された幅には影響しませんが、GoogleマップとGoogleカスタム検索エンジンを含むようないくつかのサードパーティ製のソフトウェアの問題を引き起こす可能性があります。
まれに、それをオーバーライドする必要があり、次のようなものを使用します。

.selector-for-some-widget {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

上のコードでは、ネストされた要素はすべて、(:before:afterを経由して生成されたコンテンツを含む)その.selector-for-some-widgetの指定されたボックス・サイズを継承します。

box-sizingを採用しているようです。確かにいろいろなところに使われています。

Normalize.css

改善されたクロスブラウザのレンダリングのために、我々はブラウザやデバイス間の小さな不整合を修正するためにNormalize.cssを使用しています。今後は、Rebootを、やや独断スタイルで、この上に構築します。

rebootとは何でしょうか?独自の新しいベースCSSのことかもしれません。


Download

bs4a2
現在はダウンロードはソースファイル一式のみになっています。他はまだありません。

カスタムビルド

bs4a3
ダウンロード項目に3パターンのカスタムがあります。どんな感じなのか気になるところです。
Reboot:変数/ミックスイン、ノーマライズ、およびリブートが含まれています。JavaScriptありません。
Grid only:変数/ミックスインと当社のグリッド・システムが含まれています。JavaScriptのありません
Flexbox:ブートストラップのすべてのフレキシボックス有効になっており、下側のブラウザをサポートしました。


Browsers and devices

ブートストラップは、最新のブラウザやデバイス、およびいくつかの古いものを幅広くサポートしています。これは以下の正確なものだけでなく、バグの詳細情報を参照してください。

サポートブラウザ

ブートストラップは、すべての主要なブラウザとプラットフォームの最新の安定リリースをサポートしています。 Windowsでは、Internet Explorer9-11サポートしています。より具体的なサポート情報は、以下に提供されます。

bs4a4
モバイルブラウザに関しましてはOpera以外はすべて対応ということになっています。デスクトップブラウザはほぼすべて対応。SafariのWindows版が未対応ということです。IE9の部分対応ということになっています。いくつかのCSS3プロパティとHTML5の要素が完全にサポートされていないようです。IE8は未対応ということになっており、対応する場合はバージョン3を使ってねと言うことです。たしか3も部分対応なのでカスタマイズして対応するしかなかった気がします。
bs4a5

IE Compatibility modes

ブートストラップは、古いInternet Explorerの互換モードでサポートされていません。適切に含めることを検討、IEの最新のレンダリングモードを使用していることを確認するための<meta>ページ内のタグ:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

bs4a6
このタグは、Internet Explorerのサポートされている各バージョンで可能な限り最高のレンダリングを確実にするために必須のようです。今後はこのタグも記述していくことになりそうです。


カスタムオプション

Sassファイルでカスタマイズのようです。(_variables.scss)以前はlessだったのですが時代の流れでしょうか。

Flexbox

ついにFlexbox採用されたようですね。近々には採用されるとは思っておりました。

ビルドツール

bs4a7
ビルドツールGrunt推奨のようですがGulpでも出来そうですね。

ベストプラクティス

我々は、設計と環境の数で動作するようにブートストラップを開発しました。ここで私たちが取り組んで、それを自分自身を使用しての年から収集してきたベストプラクティスをいくつか紹介します。とありますがまだ作成中のようです。

概要

ブートストラップは、ラップの容器、強力なグリッドシステム、柔軟なメディアオブジェクト、および応答性のユーティリティクラスを含め、あなたのプロジェクトをレイアウトするためのいくつかのコンポーネントとオプションが含まれています。

ブレークポイント

ブートストラップは、初の携帯であることが開発されているので、私たちは、レイアウトやインターフェースのための賢明なブレークポイントを作成するには、メディアクエリの一握りを使用しています。これらのブレークポイントは、主に最小ビューポートの幅に基づいており、私たちはビューポートの変更などの要素をスケールアップすることを可能にしています。

主に使用してブートストラップ次のメディアクエリーは、範囲-またはブレークポイントインわれわれの情報源私たちのレイアウトのサスファイル、グリッドシステム、およびコンポーネント。

bs4a8
メディアクエリーの単位がpxからemに変更されています。サイズも増えていますね。xs、sm、md、lg、xl、実際はxsとsmの間が狭まっているという感じでしょうか。pxでいえば768pxから544pxに変わっています。デフォルトが16pxに増えていますのでxsが0-543pxまで、smが544-767pxまで、mdが768-991px、lgが992-1199pxまで、xlが1200px~というサイズです。


グリッドシステム

ブートストラップは、すべての形や大きさのレイアウトを構築するための強力なモバイル・第1グリッドシステムを含みます。これは、12列のレイアウトに基づいて、複数の層、各メディアクエリ範囲のいずれかを有しています。あなたはサスのミックスインまたは当社の事前定義されたクラスでそれを使用することができます。

bs4a9
グリッドシステムに関しては同じですね。remがデフォルト単位のようです。そしてサイズも1つ大きい物が増えています。

メディアオブジェクト

メディアオブジェクトは、(ブログのコメント、つぶやき、などのような)より複雑で反復的なコンポーネントを構築するための基礎として使用される抽象エレメントです。左右揃えコンテンツ、ネストコンテンツ配置オプション、および詳細については、サポートも含まれています。

こちらも以前のままです。ただしフレキシボックスモードを有効にすると、可能な限り、メディアオブジェクトは、フレックススタイルを使用するそうなんですが、いったいどういうことなんだろう?

Responsive utilities

より高速なモバイル向けの開発では、示すとメディアクエリーを介してデバイスによってコンテンツを隠すために、これらのユーティリティクラスを使用します。また、印刷時にコンテンツを切り替えるためのユーティリティクラスも含まれています。

限定的にこれらを使用して、同じサイトの完全に異なるバージョンを作成しないようにしてください。その代わりに、各デバイスのプレゼンテーションを補完するためにそれらを使用しています。

bs4a10
ここで追加しました。.hidden-md-upや.hidden-md-downというサイズ以上という項目が追加されましたが、逆にvisibleは無くなったようですね。

コンテンツ

Typography、Code、ImagesはそれほどかわりなくTablesに機能追加されています。

bs4a11
bs4a12
bs4a13
Inverse tableクラスを追加すると中の色が黒で文字が白になります。thead-inverseクラスでtheadの中が黒で文字が白というテーブルヘッダ的に使われやすいです。それからReflowというクラスでいままでは100%の幅が文字列のある幅しか表示しなくなりました。文字数が少ないテーブルには良いかもしれませんね。

bs4a14
それからイメージキャプションの機能が追加されました。画像下にキャプションが入ります。これも良いですね。

コンポーネント

ボタン

bs4a15
ボタンの色が若干明るくなった気がします。defaultがsecondaryに変更された模様です。それからbtn-*-outlineというクラスが追加されて色が反転するような感じのボタンです。枠と文字だけ色がついて中身は白です。そのほかButton group、Button dropdownは特に変わりなしです。

フォーム

bs4a16
フォームに若干の変更がありました。fieldsetにform-groupが推奨なのでしょうか、divでも可能のようです。input file用のクラス.form-control-fileも追加されています。help-blockのかわりにtext-mutedに変更されています。それからカスタムフォームという機能が追加され。チェックボックス、ラジオボタン、セレクトメニュー、ファイルブラウザがかっこよくスタイルされています。良いですね。

Jumbotron

bs4a17
サイト上でのマーケティングメッセージを表示する場所。こちらの見出しの機能は若干変更されています。displayクラスがサイズ変更の役割を行います。

Labels

bs4a18
BadgesはLabelsに統合された形になりました。.label-pillクラスで代用されています。

Cards

カードは、柔軟で拡張可能なコンテンツのコンテナです。これは、ヘッダーとフッターのオプション、さまざまなコンテンツ、文脈背景色、および強力な表示オプションが含まれています。

あなたがブートストラップ3に精通している場合、カードは私たちの古いパネル、ウェルズ、およびサムネイルを交換してください。これらのコンポーネントと同様の機能は、カードの修飾子クラスとして利用可能です。

bs4a19
こちらが目玉機能ですね。パネルとウェルズとサムネイル機能をばっさりと切り捨てました。とはいっても代替え可能ということなのでコチラの機能を使っていくことにしましょう。これはかなり使い勝手が良いです。

その他

bs4a20
bs4a21
Navs、Navbar、Breadcrumb、Pagination、Progress、List group、Modal、Scrollspy、Tooltips、Popovers、Collapse、Carouselの細かい変更はありますが大まか同じです。そしてMargin、Paddingクラスが追加されました。これは欲しかったクラスです。

変更点まとめ

・ソースのCSSファイルのSCSSへLESSからスイッチ。
・主なCSSの単位としてpxからremに。
・メディアクエリは、pxからem
・グローバルフォントサイズは14から16pxにまで増加。
・〜480px以下とするための新しいグリッド層が追加。
・パネル、サムネイル、ウェルズの代わりに、カードを利用する。
・Glyphiconsアイコンフォントを落としました。
・jQueryプラグインAffixを外しました。position: stickyを使用推奨。
・ブートストラップのノンレスポンシブの使用はサポートされなくなりました。
・完全にpage-headerクラスを落としました。

というところでしょうか?アイコンフォントが別の物になるのでしょうか?これもまだ分かりませんね。だいぶHTML5に準拠した形になった来た気がします。
ますます使いやすくなってきている感じはありますね。

以上参考になればと思います。今後もコチラの記事にアップデート情報を記述していきます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です