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

サイト構築 -制作

Post on:2016年3月17日

Bootstrap 4で変わった点

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

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

Bootstrapのファイル構造

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

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

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

Bootstrap 4のインストール

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

ソースファイル

Sass, JavaScript, Documentationの各ファイルを含む完全なパッケージソースをダウンロードできます。単に使うだけなら、必要ありません。
Bootstrap CDN

Bootstrap CDNを無料で利用できます。CSSファイルのリンク先をCDNにします。
パッケージマネージャー

インストール時にBower, NPM, Meteor, Composerを利用できます。

詳しくは、「4 Ways to Install Bootstrap In Ubuntu Linux」を参考に。
カスタムビルド

CSSやJavaScriptの必要な部分だけにカスタマイズできます。
- Reboot: 変数とMixins, Normalize, Rebootを含みます。JavaScriptは無し。
- Grid only: 変数とMixins, グリッドシステムを含みます。JavaScriptは無し。
- Flexbox: Flexboxで使用可能なBootstrapのすべて、旧ブラウザのサポートも含みます。

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

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

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-7 sm-6">
            <div class="row">
                <div class="col-lg-7 sm-4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="col-lg-5 sm-8">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-5 sm-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

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のリセットとベースのスタイルが含まれています。

reboot.scss -GitHub

classの変更とアップデート

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

タイポグラフィ

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

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

html{
font-size: 16px; 
}
p{
font-size: 1rem; /* 1rem = 16px */
}
h1 {
    font-size: 1.875rem; /* 30px / 16px = 1.875rem */
}

html{

font-size: 16px;

}

font-size: 1rem; /* 1rem = 16px */

}

h1 {

font-size: 1.875rem; /* 30px / 16px = 1.875rem */

}

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

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

テーブルの文脈上のclass

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

テーブルの文脈上のclass

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

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

<table class="table table-sm">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
</table>

<thead>

<tr>

<th>Table Header 1</th>

<th>Table Header 2</th>

<th>Table Header 3</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

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

コンパクトなテーブル

フォームのclass

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

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

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="inputEmail3" placeholder="Email">
    </div>
  </div>
 
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control form-control-sm" id="inputPassword3" placeholder="Password">
    </div>
  </div>
 
  <div class="form-group row">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

<form>

<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>

</div>

<label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>

</div>

</div>

</form>

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

天地中央配置のラベル

他の移行されたclass

上に紹介したclass以外にも、Bootstrap 3からBootstrap 4に移行する時に必要な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では、PanelsとWellsが無くなり、Cardsに替わりました。このコンポーネントはさまざまな背景カラーで、リンクやテキストや画像やヘッダやフッタなど多種多様なコンテンツをサポートするコンテナとして使用することができます。

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

.card-title

見出しとなるタイトルです。
.card-text

テキスト要素です。
.card-header

Cardsのヘッダに使います。
.card-footer

Cardsのフッタに使います。

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

<div class="card">
        <!-- Card Header -->
 
        <div class="card-header">
            Card Header
        </div>
 
        <div class="card-block">
            <!-- Card Title -->
 
            <h4 class="card-title">This is the Card Title</h4><!-- Image -->
            <img alt="" src="http://goo.gl/oxHSMr" width="280"> 
            <!-- Card Text -->
 
            <p class="card-text">These are card text. See? They are
            awesome!</p>
        </div><!-- Card Footer -->
 
        <div class="card-footer">
            Card Footer
        </div>
</div>