• 更新日: 2017年03月09日

これを見れば全てがわかる！Bootstrap4の新機能まとめ

これを見れば全てがわかる！Bootstrap4の新機能まとめ

今年8月末にリリースされた Bootstrap の新バージョン「Bootstrap 4.0.0 alpha」。忙しくて Bootstrap 4 のバージョンをカバーできていない方、今から Bootstrap を勉強しようとしている方、そんな忙しい皆様にご参考頂けるように Bootstrap 3 からの変更点や主な特徴をご紹介します。

目次
  1. Bootstrap 4 の新機能まとめ ~ Bootstrap 3 との違い
  2. Bootstrap 4 と Bootstrap 3 の主な違い
  3. 使ってみたい Bootstrap 4 の新機能 - 5段階のグリッド・レイアウト
  4. 使ってみたい Bootstrap 4 の新機能 - navbar
  5. 使ってみたいBootstrap 4 の新機能 - cards
  6. まとめ

Bootstrap 4 の新機能まとめ ~ Bootstrap 3 との違い

Bootstrap 4 と Bootstrap 3 の主な違い

Bootstrap の最新バージョン Bootstrap 4 と 前バージョンの Bootstrap 3 との主な違いを表にまとめてみました。実際には以下に紹介する項目以外にも、クラス名などの変更点があります。

項目 Bootstrap 4 Bootstrap 3
全体
リセット CSS reboot.css normalize.css
CSS ファイル SCSS LESS
サイズ単位 rem と em px
フォント・サイズ 16 px 14 px
グリッド
段階 5 (xs,sm,md,lg,xl) 4 (xs,sm,md,lg)*
表
背景色と文字色の反転 ○ ×
ヘッダー・スタイル ○ ×
表のレスポンシブ ○ ○
サイドにヘッダー要素 ○ ×
フォーム
カスタム・フォーム（参考） ○ ×
ボタン
外枠デザインのボタン ○ ×
サイズ 3 種類 (sm, 標準, lg) 4 種類 (xs,sm,標準,lg)
アイコン
グラフィック・アイコン × ○
テンプレート 他
ノン・レスポンシブ・デザイン × ○
カード・デザイン ○ ×
パネル・デザイン ×（カードに含む） ○
サムネイル ×（カードに含む） ○
*Bootstrap 4 グリッドサイズ／xs：auto、sm：34 rem、md：45 rem、lg：60 rem、xl：72.25 rem **Bootstrap 3 グリッドサイズ／xs：auto、sm：750 px、md：970 px、lg：1170 px

その他の変更点

  • Internet Explorer 8 の対応終了
  • JavaScriptがES6仕様に変更
  • Tether（javaScript library）によるツールチップ機能の拡充
  • ドキュメントが Markdown 形式で記載

使ってみたい Bootstrap 4 の新機能 - 5段階のグリッド・レイアウト

Bootstrap 4 になってより多様なデバイス・サイズに対応できるようになっています。こちらをクリックして、画面幅を変えてみてそれぞれのクラスのレイアウト変わり具合をお確かめ下さい。

bootstrap4-grid-test

使ってみたい Bootstrap 4 の新機能 - navbar

Bootstrap 4 の navbar でできる主なこと

  • ドロップダウン・メニュー
  • ナビゲーションに現在のページをマーク- 入力フォームを搭載（検索など）
  • アライメント
  • ナビバーのカラーリング- ナビゲーションの固定表示
  • コンテンツ搭載
  • レスポンシブ・ナビNEW

Bootstrap 4 になって、レスポンシブ・ナビのnavbar-togglerクラスが追加されました。簡単にレスポンシブ・デザイン対応のナビゲーションを制作することができます。
レスポンシブ・ナビのデモ

画面幅を変更して試してみてください！ boostrap-nav-responsive

[code]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge"></pre>
<pre><!-- Bootstrap CSS --></pre>
<pre><link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<style type="text/css">
body {
padding-top: 1em;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-light bg-faded">
<!-- Toggle Button -->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
<i class="fa fa-bars"></i>
</button>
<!-- Nav Content -->
<div class="collapse navbar-toggleable-xs" id="nav-content">
<a class="navbar-brand" href="#">トップ</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">リンク１</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク２</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク３</a>
</li>
</ul>
</div>
</nav>
</div>
<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>
</body>
</html>
[/code]

またBootstrap4では、ナビゲーションへのコンテンツ搭載レイアウトも簡単にきれいに設定できるようになっています。
ナビゲーションにコンテンツを搭載したデモboostrap-nav-content

[code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<style type="text/css">
body {
padding-top: 1em;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- Navbar -->
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#baby">

</button>
</nav>
<!-- Content -->
<div class="collapse" id="baby">
<div class="bg-faded p-a">
<h4>ベビー用品</h4>
<a href="https://blog.codecamp.jp" target="_blank"><img src="https://blog.codecamp.jp/wp-content/uploads/2015/10/Baby_diving.jpg" class="img-circle"></a>
<p>DEMO／衣類・抱っこひも・ベビーカー・便利グッズ・バブー</p>
</div>
</div>
</div>
<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>
</body>
</html>
[/code]

折り畳み式コンテンツもOK デモ boostrap-nav-toggleable


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
</head>
<body>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse p-a">
<h4>折り畳み式コンテンツ</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">

</button>
</nav>
<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>
</body>
</html>

使ってみたいBootstrap 4 の新機能 - cards

Bootstrap 3 でサムネイルやパネル、wells で使われていたクラスは、Bootstrap 4 になって card クラスとして使われます。クラス名がシンプルに統合されて使いやすくなります。 Bootstrap 4 の card でできる主なことは、

  • カードにヘッダー＆フッター・デザインの設定
  • 画像とテキストのカード・デザイン
  • カード内にリスト表示
  • カード内にボタン表示
  • カードのカラーリング
  • カード内の画像に文字を上書きしたデザイン

*カード・デザインのヘッダー＆フッター * デモboostrap-cards-header-footer

[code]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<style type="text/css">
body {
padding-top: 1em;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="card" style="max-width: 20rem;">
<div class="card-header">
Header
</div>
<div class="card-block">
<h4 class="card-title">Boostrap Cards</h4>
<p class="card-text">Good Design!</p>
</div>
<div class="card-footer">
Footer
</div>
</div>
</div>
<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>
</body>
</html>
[/code]

Boostrap 3 のサムネイル・クラスは、カード・クラスに移行しています。
サムネイルのデモ

boostrap-cards

[code]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<style type="text/css">
body {
padding-top: 1em;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="card text-center" style="max-width:252px;">
<!-- Heading -->
<div class="card-block">
<h4 class="card-title">CodeCamp</h4>
<h6 class="card-subtitle text-muted">短期集中レッスン</h6>
</div>
<!-- Image -->
<img src="https://blog.codecamp.jp/wp-content/uploads/2015/09/sp250-250.png" alt="Photo of camp">
<!-- Text Content -->
<div class="card-block">
<p class="card-text">悩む前にやってみる<br>
 自分を信じてやってみる<br></p>
<a href="https://codecamp.jp/camp" class="btn btn-primary">Let's Start!</a>
</div>
</div>
</div>
<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>
</body>
</html>
[/code]

画像制作で処理しがちな文字と画像の組み合わせも、Bootstrap 4 の overlay クラスを使えば簡単に制作・編集できます。
カード内の画像に文字を上書きしたデザイン・デモ

boostrap-cards-overlay

[code]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<style type="text/css">
body {
padding-top: 1em;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="card card-inverse text-center" style="max-width: 302px;">
<!-- Image -->
<img class="card-img-top" src="https://blog.codecamp.jp/wp-content/uploads/2015/10/startup-photos.jpg" alt="Photo of camp">
<!-- Text Overlay -->
<div class="card-img-overlay">
<h4 class="card-title">プログラミング</h4>
<p class="card-text">はじめてみない？</p>
</div>
<div class="card-block">
プログラミング、はじめた人だけが見える新しい世界・・・
</div>
</div>
</div>
<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>
</body>
</html>
[/code]

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら

まとめ

いかがでしたでしょうか？ Bootstrap 4 になって簡単にモダン・デザインが作成できるだけでなく、 Bootstrap 3 でもあった各種クラスのカラーやデザインも変更されています。バージョン3に慣れたばかりの方もいらっしゃるかもしれませんが、がんばって新しい仕様のバージョン4に慣れていきたいですね。

最後にPRになりますがCodeCampでは、2015年10月8日よりBootstrap講座を開始しました。HTML、CSS の基礎知識を持っている方は Bootstrap コースを受講することで、よりスピーディーにオシャレな web デザインを構築していくことができます。またこれから HTML や CSS などの基礎知識を学んでいこうと考えている方は、マスターコースを受講すると Bootstrap 講座がセット（2015年10月15日現在）でついてくるみたいですよ。お得ですね。

オシママサラ
この記事を書いた人
オシママサラ

人気記事

  1. 【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    プログラミング学習
    プログラミングスクール・サービス
  2. 塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    受講生インタビュー
  3. 様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    講師インタビュー
  4. 【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    Python
    プログラミング書籍・参考書
  5. 【PHP入門徹底ガイド】初心者のための学習ロードマップ
    【PHP入門徹底ガイド】初心者のための学習ロードマップ
    PHP
    プログラミング入門
  6. コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    Python
    HTML
    CSS
    お役立ち情報
    アプリ学習入門
  7. 【Twitter×Python】自分専用のエゴサーチボットを作る方法
    【Twitter×Python】自分専用のエゴサーチボットを作る方法
    Python
  8. Webデザインから見たSEO
    Webデザインから見たSEO
    Webデザイン入門
    Webデザインお役立ち情報
  9. 未経験からのWebデザイナー転職を有利にする資格４選
    未経験からのWebデザイナー転職を有利にする資格４選
    Webデザインお役立ち情報
    転職
まずは7日間お試し！人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp
プログラミング講座を無料で試す