ウィルスタイル株式会社 / Will Style Inc.

Bootstrap4とは

Bootstrapとは、いまやWebデザイナー・Webエンジニアで知らない人はいないのではないかと言うぐらい有名なウェブサイトやWebアプリケーションを作成するフロントエンドフレームワークのひとつです。
Bootstrap4は現在alpha版（2017年05月現在）です。

Bootstrap 4

使用しているCSSプリプロセッサーがSassに変更された

では早速インストールしてみます。

npm install bootstrap@next --save

jQueryも一緒にインストールされますが、Bootstrap.jsを使用しない場合は必須ではありません。
Bootstrap3からBootstrap4への変更で最も大きな変更点といえばCSSプリプロセッサーがLessからSassに変更になったことではないでしょうか。
変数の指定やimportの解除などでSass使いの人であればカスタマイズがとても容易になりました。
_variables.scss内の変数をbootstrap.scssをimportする前のScssファイルにコピーし、変更を加え!defaultを外せば変更が反映されます。
また、bootstrap.scss内で必要ないソースをコメントアウトすることでコンパイル後のCSSを軽量化することが可能です。

基本単位がremに変更されグローバルフォントサイズが14pxから16pxに変更された

remという単位はルートのフォントサイズを基準にしており、直前の親の影響などを受けないサイズを指定することができます。
マージン・パディングなどの余白にもこの単位が採用されています。

html{
	font-size:16px;
}
h1{
	font-size:2rem; // 32px
}
p{
	font-size:1rem; // 16px
}

グリッドシステムがflexbox対応になり基準のサイズ名が変更になった

グリッドシステムにも大きな変更が加えられました。
まず、Breakpointが増え、クラス名が変更されています。

Grid system

v3までとはサイズが一つ下にずれ、xsが廃止になり、xlが追加されました。
また、カラム数やガターのサイズも変数で変更できます。

$grid-columns:12;
$grid-gutter-width-base: 30px;

ブレークポイントのmixinも使用可能です。

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// ↓のように変換されます。
@media (min-width: 575px) { ... }
@media (min-width: 767px) { ... }
@media (min-width: 991px) { ... }
@media (min-width: 1199px) { ... }

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
// ↓のように変換されます。
@media (max-width: 575px) { ... }
@media (max-width: 767px) { ... }
@media (max-width: 991px) { ... }
@media (max-width: 1199px) { ... }

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
// ↓のように変換されます。
@media (max-width: 575px) { ... }
@media (min-width: 576px) and (max-width: 767px) { ... }
@media (min-width: 768px) and (max-width: 991px) { ... }
@media (min-width: 992px) and (max-width: 1199px) { ... }
@media (min-width: 1200px) { ... }

@include media-breakpoint-between(md, xl) { ... }
// ↓のように変換されます。
@media (min-width: 768px) and (max-width: 1199px) { ... }

Overview

また、変数$enable-flexをtrueにすることでFlexboxに切り替わります。

$enable-flex:true;

Panelsが廃止され、Cardsが追加された

PanelsとWellsが無くなり、新たにCardsが追加されました。
マークアップ方法は以下です。

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Cards

汎用クラスが追加された

上下左右に余白をもたせる際に.mt20とか.pb30とか汎用クラスを作成していた方も多いのではないでしょうか？
Bootstrap4では汎用クラスとしてSpacingが追加されました。
記法は{property}{sides}-{size}のような感じで、{property}{sides}-{breakpoint}-{size}とすることでブレークポイントごとの指定も可能です。
単位はデフォルトで1remとなっており、{size}の箇所は0から5までとなり1で.25倍、2で.5倍、3で1倍、4で1.5倍、5で3倍となります。
例えば.my-3を付与することでmargin-topとmargin-bottomが1remになります。

.my-3 {
  margin-top: $spacer-y !important;
  margin-bottom: $spacer-y !important;
}

Spacing

各種記述法が変更された

v3でよく使っていたものも記述法が変更になっています。
例えばパンくずリストです。
List要素でもNav要素でも子要素に.breadcrumb-itemが必須になりました。

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active">Data</li>
</ol>

Breadcrumb

同じような例ですがList groupも.list-group-itemが必須になっています。

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

List group

定義リストの横並びも変更になっています。
v3では.dl-horizontalを指定するだけでしたが、.dl-horizontalは廃止されグリッドシステムを使用するように変更になっています。

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Description list alignment

レスポンシブテーブルの記述法も変更になっています。
v3まではdiv.table-responsiveでtable.tableをwrapしていましたが、table自体に.table-responsive指定するように変更になっています。

<table class="table table-responsive">
  ...
</table>

Responsive tables

最後に

今回、弊社でもBootstrap4を実際にクライアントワークで使ってみました。
使ってみた所感としては、はじめはGrid systemの変更に戸惑いはしましたが、特に違和感なく移行できたように思います。
何よりremを基本単位にしたことでレスポンシブにした際のサイズの変化を比較的簡単に変更できた事がとても便利に感じました。
まだまだ紹介しきれていない部分や、alpha版の段階なので今後変更や追加があるとは思いますが皆様もぜひ一度お試しください。

今回参考にさせていただいた記事

• Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ
• Bootstrap 4の主な変更点とファーストインプレッション