Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ

Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。

Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。

サイトのキャプチャ

How to Migrate from Bootstrap Version 3 to 4

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

Bootstrap 4で変わった点

まずは、Bootstrap 4で大きく変わった点を押さえておきましょう。

  • ソースのCSSファイルは、LessからSassに。
  • CSSで使用する主要な単位は、pxからemに。
  • Media Queriesも、pxからemに。
  • グローバルのフォントサイズは、14pxから16pxに。

Bootstrapのファイル構造

Bootstrapの3と4では、ファイル構造も異なります。

Bootstrapのファイル構造

左: Bootstrap 3のファイル構造、右: Bootstrap 4のファイル構造

「less」が「scss」に置き換わり、Bootstrap 4ではグリフアイコンをサポートしないため、「fonts」フォルダは削除されました。

Bootstrap 4のインストール

Bootstrap 4はインストール時にさまざまなオプションを提供します。

  1. ソースファイル
    Sass, JavaScript, Documentationの各ファイルを含む完全なパッケージソースをダウンロードできます。単に使うだけなら、必要ありません。
  2. Bootstrap CDN
    Bootstrap CDNを無料で利用できます。CSSファイルのリンク先をCDNにします。
  3. パッケージ マネージャー
    インストール時にBower, NPM, Meteor, Composerを利用できます。
    詳しくは、「4 Ways to Install Bootstrap In Ubuntu Linux」を参考に。
  4. カスタム ビルド
    CSSやJavaScriptの必要な部分だけにカスタマイズできます。
    • Reboot: 変数とMixins, Normalize, Rebootを含みます。JavaScriptは無し。
    • Grid only: 変数とMixins, グリッドシステムを含みます。JavaScriptは無し。
    • Flexbox: Flexboxで使用可能なBootstrapのすべて、旧ブラウザのサポートも含みます。

グリッドシステムのアップデート

Bootstrap 4のグリッドシステムは今までと同じHTMLで利用できますが、サイズの単位は異なります。例えば、12カラムのグリッドのマークアップを見てみましょう。

HTML自体に新しいものはありません。classもBootstrap 3と同じです。しかし、Bootstrap 4では単位がpxではなく、emを使用します。そして、スクリーンサイズの新しい定義が加わりました。

スクリーンサイズ用のclass

  • col-xs
    スクリーンサイズが34em未満の特別小さいサイズ用のclass
  • col-sm
    スクリーンサイズが34emより上の小さいサイズ用のclass
  • col-md
    スクリーンサイズが48emより上の中ぐらいサイズ用のclass
  • col-lg
    スクリーンサイズが62emより上の大きいサイズ用のclass
  • col-xl
    スクリーンサイズが75emより上の特大サイズ用のclass

もう一つ覚えておきたいことは、「.container」と「.row」です。
「.container」はremでセットされた最大幅を持っており、「.row」もremで左右に-.9375remの負のマージンをデフォルトで持ち、カラムには左右に0.9375remのパディングを持っています。これらの値はBootstrap 3では15pxでした。

このことはスクリーンサイズをサポートするためには良いことですが、Photoshopのようにpx単位でデザインする時には注意が必要です。

もしあなたがBootstrap 4のSassを含むソースファイルを利用するなら、次の変数を変えることで、グリッドの大きさを調整できます。

  • $grid-columns
    水平方向のグリッドの数(デフォルト: 12)
  • $grid-gutter-width
    それぞれのグリッドの総合的なパディング(デフォルト: 30px)
  • $grid-float-breakpoint
    navbarが折り畳まれない最小サイズ(デフォルト: $screen-sm-min)
  • $grid-float-breakpoint-max
    navbarが折り畳まれる最大サイズ(デフォルト: $grid-float-breakpoint – 1)

リセットは、「normalize.css」から「reboot.css」に

Bootstrap 3ではリセットに「normalize.css」が利用されていましたが、Bootstrap 4では変更されました。

Bootstrap 4のリセットは「reboot.css」で、Bootstrapのリセットとベースのスタイルが含まれています。

classの変更とアップデート

Bootstrap 3と4の2つのバージョン間で、非常に少ないながらclass名の変化があり、いくつかのclassは無くなりました。
以下、各コンポーネントごとにclassの変更とアップデートを見てましょう。

タイポグラフィ

Bootstrap 4のタイポグラフィでは、remを使用しています。remはルートの値を参照する単位で、直接値を指定するpx、親要素の値を参照するemとは異なります。しかし、px, em, ptなどの値を使用することはできます。

remがどのように機能するか見てみましょう。
まずは、ルートとなるhtmlに基準となるサイズを定義し、各要素はその値から相対的に算出されます。

この例では、htmlに指定した16pxを基準に、p要素は1remなので16pxになります。h1要素は1.875remで、ルートの16pxを基準にして30pxになります。

単位にremを使用すると、さまざまなスクリーンサイズでの調整が簡単で、ルートとなるhtmlのサイズを変更するだけでOKです。

テーブルの文脈上のclass

Bootstrap 3では文脈上のclassをテーブルの行や個別のセルに背景カラーを設定するために使用していました。Bootstrap 4では文脈上のclassに接頭辞「.table-」を加えて使用します。

テーブルの文脈上のclass

テーブルの文脈上のclass

テーブルをコンパクトにするclass

Bootstrap 3では「.table-condensed」でテーブルのパディング値を半分にして、コンパクトなテーブルが実装できました。Bootstrap 4では「.table-sm」に変更されました。

パディングが通常より半分の値で実装されます。

コンパクトなテーブル

コンパクトなテーブル

フォームのclass

フォームもclass名の変更がいくつかあります。もっとも大きな変更は2つで、「.input-lg」と「.input-sm」が、「.form-control-lg」と「.form-control-sm」にリネームされ、「.form-group-*」は無くなりました。

Bootstrap 4では新しいclassとして「.form-control-label」を加え、「.form-control」のラベルを垂直方向の中央に配置します。どのようになるか見てましょう。

ラベルが入力エリアに対して、垂直方向の中央に配置されます。

天地中央配置のラベル

天地中央配置のラベル

他の移行されたclass

上に紹介したclass以外にも、Bootstrap 3からBootstrap 4に移行する時に必要なclassがいくつかあります。

他の移行されたclass

他の移行されたclass

JavaScriptの変更点

BootstrapではJavaScriptに依存する多くのコンポーネントを使います。そして通常のコンポーネントと同様に、JavaScriptでも多くの変更はありません。コーディング的にはほとんど同じですが、いくつか調整された点があります。

  • IE8のサポートは終了
    マイクロソフトのIE8のサポートが終了した現在、jQuery 2.0を使うことは何の問題もありません。
  • ES6のサポート
    すべてのプラグインはES6で書かれ、Babelでコンパイルされています。
  • AMDとUMD
    AMDとUMDの問題は解決されています。
    参考: AMD with concatenated JS file, UMD tests

Bootstrap 4の新しい機能

ここからは、Bootstrap 4の新しい機能を見ていきましょう。
変更された大部分は、classに使われるネーミングスキームに適合をもたらすもので、まったく新しいものもあります。

新しい機能: Cards

Bootstrap 4では、PanelsWellsが無くなり、Cardsに替わりました。このコンポーネントはさまざまな背景カラーで、リンクやテキストや画像やヘッダやフッタなど多種多様なコンテンツをサポートするコンテナとして使用することができます。

Cardsを使うには、要素に「.card」と「.card-block」を加えます。Cardsでは他にもclassが用意されています。

  • .card-title
    見出しとなるタイトルです。
  • .card-text
    テキスト要素です。
  • .card-header
    Cardsのヘッダに使います。
  • .card-footer
    Cardsのフッタに使います。

Cardsのマークアップは、非常に簡単です。

見た目は下記のようになります。

Cardsの実装サンプル

Cardsの実装サンプル

新しい機能: Flexbox

Bootstrap 4のもう一つの大きな新しい機能は、Flexboxです。Flexboxのレイアウトは、UIレイアウトのために最適化されたボックスモデルです。ページのレイアウトがリサイズされた時、予想していたかのようにページ上で要素が最適に配置されます。

「_variables.scss」ファイルにある「$enable-flex」の値を「True」にすることで、すべてのグリッドレイアウトにFlexboxが使えるようになります。

Flexboxがどのように機能するか下記ページでリアルタイムに効果を確認できます。

サイトのキャプチャ

Bootstrap 4 Flex Box Grid Demo

注意
Flexboxは、IE9ではサポートされていません。

新しい機能: Tooltips

ツールチップは、Bootstrap 3ではtipsyを使用していましたが、Bootstrap 4ではTetherに移行されました。ツールチップを使用する時は、「bootstrap.js」の直前に「tether.js」をインクルードしてください。

終わりに

この記事であなたはBootstrap 3からBootstrap 4に移行するために、知る必要があることを学びました。最後のアドバイスは、常に公式のドキュメントをチェックすることです。将来の更新のためのアドバイスがあるでしょう。

サイトのキャプチャ

Bootstrap v4 alpha

2016年3月現在、Bootstrap 4のバージョンは「v4 alpha」です。

top of page

©2016 coliss