Bootstrap 3.3.7とBootstrap 4 Alpha3のアップデートされた変更点のまとめ

先月末にBootstrap 3とBootstrap 4がアップデートされました。
Bootstrap 3はjQuery 3のサポートをはじめ、より使い勝手のよいものに、Bootstrap 4はバグフィックスとともに、グリッドやフォーム周りが大きく変更されました。

サイトのキャプチャ

Bootstrap

Bootstrap 3から4に移行する時は、下記ページを参考にどうぞ。

Bootstrap 3.3.7のリリース情報

Bootstrap 3.3.7は、2016年7月25日にリリースされ、前回の3.3.6は2015年11月から半年ぶりのアップデートです。

今回のアップデートでハイライトとなるのは、4つ。

  • jQuery 3をサポート
  • sourcemapの不具合を修正(CDNの4xxエラーを削除)
  • いくつかのdevDependenciesとgemsをアップデート
  • @viewportでサポートされていないベンダプレフィックスを削除。

CSSの重要な変更はありません。
詳細は、下記ページをご覧ください。

上記からBootstrap 3.3.7のファイルやソースコードもダウンロードできます。

Bootstrap 4 Alpha3のリリース情報

Bootstrap 4 Alpha3は、2016年7月27日にリリースされました、前回の4 Alpha2は2015年12月。

未だアルファ版のままですが、着実に進化が重ねられています。

  • グリッドを徹底的に見直し
  • フォームコントロールのアップデート
  • 新しいフォントスタック
  • 数多くのバグフィックス

グリッドとフォームコントロールは特に大きなアップデートが施されています。

Bootstrap 4のグリッドの主な変更点

  • コンテナやカラムなど、グリッドのclassはSassの変数で無効にすることが可能
  • グリッドのclassから「col-」の接頭辞を削除
  • Mixinsを変更
  • カラム数、コンテナの幅、ブレイクポイントなどをどのように変更するかドキュメントを追加

Bootstrap 4のFlexboxの主な変更点

サイトのキャプチャ

Flexbox周りも今回のアップデートで全面的にアップデートされました。

  • Flexboxのドキュメントを新しくしました。
    Flexbox grid system
  • 「.col-{breakpoint}」という新しいclassで、自動的に等しい幅をカラムに与えます。例えばxsのブレイクポイントで3つの等しい幅のカラムをつくる時は、「.col-xs」を与えるだけです。
  • 水平・垂直にアイテムを配置する新しいclass。Bootstrapのグリッドだけでなく、他のコンポーネントで機能します。

Bootstrap 4のフォームコントロールの主な変更点

サイトのキャプチャ

フォームもドキュメントをはじめ、classの名前、レイアウトのオプション、バリデーションのスタイルなど、すべてにおいて劇的にアップデートされました。

  • チェックボックス・ラジオボタン・インプットのサイズ・legend要素などは、新しいclassです。
  • フォームコントロールとバリデーションのステータス用にbase64 PNGの背景画像をインラインのSVGに変更。これによりサイズ調整も可能。
  • バリデーションのステータスは、フォームのバリデーションとテキストのオプションを一新。
  • fieldsetやselectなどの少数のフォーム関連のバグを修正。
  • アップデートに伴い、ドキュメントも大修正。
    Forms

詳細は、下記ページをご覧ください。

上記からBootstrap 4 Alpha3のファイルやソースコードもダウンロードできます。

top of page

©2018 coliss