iawd-bs-eye001

Bootstrap4 Alpha3とBootstrap3.3.7のコンポーネント差異徹底比較

Bootstrap3とBootstrap4は、どこがどのくらい違うのか?徹底比較します(現在進行形)。実際にこのサイトで使っているページのHTMLファイルを使ってテストしていますので、具体的に分かっていただけると思います。比較の方法は、

全く同じHTMLファイル2つそれぞれにBootstrap3とBootstrap4のCSSとJSをインクルードさせ、具体的にどのくらい差異があるのかを実際にブラウザで表示させて比較する方法を採っています。

これにより、バージョン3からバージョン4に移行させる時、どこはそののまで良くて、どこを直せばよいかが一目瞭然に分かります。

なおCSSとJSは、それぞれ最新バージョン(2016年8月14日現在)のv3.3.7v4 alpha3をCDNでインクルードさせています。

「img-responsive」は書き直し

上記リンク先のページを比較してください。Bootstrap4では、Bootstrap3の画像をレスポンシブ対応にするタグ「img-responsive」を引き続き使えません。

.img-fluid」に変更されてます。ただしmax-width: 100%; 、 height: auto; で親要素に比例するように比率を保ったまま縮小される機能は変わりません(元サイズ以上に拡大はされません)。

夏本健司 Bootstrap4

ちなみに、この例を見ると、.pull-xs-left.pull-xs-right.m-x-auto.d-blockなど新しいクラスが追加されているのが分かります。順に左寄せ、右寄せ、中央寄せですね。最後のDIVで囲む方法も含め、意外と重宝しそうな気がします。

グロナビは作り直し

上記リンク先のページを比較してください。Bootstrap4では、グロナビが非表示になってしまっています。これは、ナビを構成するブロック構造とクラス名が変更されているためです。具体的には・・・と、書きたいこところですが、事務所に帰って控えのメモを見ながら後ほど解説します!^_^;

追加機能群

4からは「Utility classes」という追加機能群が増えています。汎用性・反復性がある表示にクラス名を与えて、いちいちCSSを書かなくても済むように、という配慮でしょう。これについても、いずれ1つ1つ解説をしていきたいですが、まずは

をご覧ください。該当クラス名と説明を読めば、だいたい、感覚的におわかりいただけるはずです。

その他・・・

上記リンク先のページの下部にコンポーネントを追加させ、さらに検証を続けます!特にJSを使ったコンポーネントやナビ系に注力するつもりです。。。

なるほど!と思ったら、すぐシェア♪

コメントを残す

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

東京Webデザイナーズ交流会/10月のテーマ

WordPressで有料課金型会員制サイトを構築する方法

検索してもなかなか情報のない「会員制サイトを構築法」を解説します。